存储在mysql中的图像的背景封面 [英] Background Cover for image stored in mysql

问题描述

我在数据库中存储了一个图像，试图将其拉伸到div的宽度和高度，我可以将宽度设置为100％，但是不能将高度设置为相同高度.

I have an image stored in a database that I'm trying to stretch to width and height of div, I can get the width to 100% but can't get the height to do the same.

我想使用背景封面，但是由于我无法通过背景获取图片，因此无法正常工作:css中的url()

I'd like to use background cover but that wont work as I'm not getting my image via background: url() in css

已尝试使用不同变体的代码，但目前是:

The code has been tried with different variations but currently is:

<div id="postimave">
    <img src="data:image/jpeg;base64,<?php echo base64_encode($thumb) ?>" />
</div>

CSS:

img {
    width:100%;
    height:100%;
    background-size:cover;
}

推荐答案

background-size:cover; 只能应用于CSS中的 background-image 定义.您是说不能以这种方式使用它.请问有具体原因吗?总的来说，它是这样工作的:

background-size: cover; can only be applied to a background-image definition in CSS. You're saying that you can't use it that way. Is there are specific reason? In general it does work this way:

<div id="postimave" style="background-image: url(data:image/jpeg;base64,<?php echo base64_encode($thumb); ?>)">
</div>

CSS:

#postimave{
    background-size:cover;
    /* Add your desired width and height */
}

使用 img 元素可以设置 width:100％; ，它将水平填充该空间.其他选择是通过PHP或使用JavaScript来重新设置封面效果来调整图像的大小/裁剪.

Using the img-element you can set the width: 100%; which will fill the space horizontally. Other options would be to resize/crop the image via PHP or using JavaScript for recreating the cover-effect.

这篇关于存储在mysql中的图像的背景封面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！