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

您的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%;
}

如何实现动态图像的“背景图像：覆盖”CSS效果？

3 个答案: