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

Question

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

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

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

我不喜欢使用 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

我最终做了以下事情，没有改变 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%;
}

Answer 2

你的 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 3

将图像设置为 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;
}