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

【问题标题】：How to achieve "background-image: cover" CSS effect for dynamic images?如何实现动态图片的“background-image:cover”CSS效果？
【发布时间】：2015-12-15 06:20:00
【问题描述】：

当使用以下 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;
}

【问题讨论】：

为什么不只是<div style="background-image: $img_url ;">？
div img{width:100%; } @corre
你的图片有什么动态？您的 CSS 规则会影响所有 DIV。
html 的当前结构是<div><img src="<?php echo $img_url; ?>"></div>，我想保留它。通过这种方式，PHP 文件保持其定义元素的目的，并由 CSS 文件设置它们的样式。没有重叠。 @乔尔阿尔梅达
为什么有人反对我的问题？

标签： html css image background-image background-size

【解决方案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%;
}

【讨论】：

【解决方案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;
}

【讨论】：

html 的当前结构是<div><img src="<?php echo $img_url; ?>"></div>，我想保留它。通过这种方式，PHP 文件保持其定义元素的目的，并且 CSS 文件为它们设置样式。没有重叠。 @rblarsen

【解决方案3】：

你的 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 代码的作用类似于背景图像操作。

【讨论】：

这里的图像不会失真吗？如果图像是 1000x500 并且 .dynamic-image div 是 500x500，那么图像将是 500x500？
然后让我们为 img 设置高度：auto
另外，如果你的图片对于封面 div 来说不够大，backgorund-size:cover 也不好看。
通过设置`height:auto;'如果比例大于 3:1，则 div 内的图像下方可能有一个空白区域。例如：600x100，而 div 设置为 600x200。 @guvenckardas
@corre，用 width:100% 怎么样；