如何实现动态图片的"background-image: cover"CSS效果？

Question

使用以下 CSS 样式时，图像会完全覆盖 div，同时保持其比例：

div {
  background: url(images/plants/flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

问题是我需要使用 PHP 生成图像 URL，因此我无法在 CSS 属性.[=15 中指定它=]

我不喜欢使用 jQuery、JavaScript 或内联 CSS。我之后的代码如下所示：

PHP

$img_url = get_img_url();
echo '<div><img src="' . $img_url . '"></div>';

CSS

 div {
  width: 600px;
  height: 200px;
}
img {
  size: cover;
}

Answer 1

您的PHP代码

$img_url = get_img_url();
echo '<div class='dynamic-image'><img src="' . $img_url . '"></div>';

和CSS

.dynamic-image{
position:relative;
 width: 600px;
    heigh: 200px; 
}

.dynamic-image img{
 position:absolute;
 width:100%;
 height:100%;
 top:0; left:0;z-index:-1;
}

此 img 代码的作用类似于背景图片操作。

Answer 2

将图像设置为 div 的背景，作为内联样式：

PHP:

$img_url = get_img_url();
echo '<div style="background-image: '.$img_url.'"></div>';

CSS:

div {
    width: 600px;
    heigh: 200px;
    background-size: cover;
    background-repeat: no-repeat;
}

Answer 3

我最终做了以下事情，没有改变 html 也没有使用其他语言：

PHP

$img_url = get_img_url();

HTML

<div>
  <img src="<?php echo $img_url; ?>">
</div>

CSS

div {
  width: 600px;
  height: 200px;
}

div img {
  min-width: 100%;
  min-height: 100%;
}

如何实现动态图片的"background-image: cover"CSS效果？

How to achieve "background-image: cover" CSS effect for dynamic images?

html

css

image

background-image

background-size