使 img 响应并填充到 div

Posted 2023-05-07

【中文标题】使 img 响应并填充到 div

【英文标题】：make img responsive and fill into a div

【发布时间】：2015-06-26 06:20:02

【问题描述】：

我有一个定义了宽度和高度的 div。然后我有一个我想适合它的图像（保持比例）。就像JsFiddle ：

<div style="width: 200px; height: 300px; background: red;">
    <img src="http://placehold.it/200x800" style="width: auto; height: auto; max-width: 100%; max-height: 100%" />
</div>

现在我想要 一个包裹在 img 上的 div（即与 img 的宽度、高度和位置精确调整），因为这样我希望在 div 内有一些元素，position:absolute 相对于 img。检查JsFiddle：

<div style="width: 200px; height: 300px; background: red;">
    <div style="display: inline-block; max-width: 100%; max-height: 100%; background: blue;">
                <img src="http://placehold.it/200x800" style="width: auto; height: auto; max-width: inherit; max-height: inherit" />

    </div>
</div>

结果错误，导致img覆盖在div上。我希望 img 像第一个示例一样调整大小。

在Child with max-height: 100% overflows parent 中，他们指出 div 需要有一个高度和一个宽度，但这样 div 就不会填满整个 img。

真的有办法吗？

我的整个布局更加复杂，并且完全响应顶部的 flex，这里的示例只是针对我遇到的问题的一个近似值。所以任何固定高度和宽度的解决方案都是错误的。

【参考方案1】：

不要使用额外的div。只需使用background-image。更干净，更容易，更语义化。可以将东西绝对定位在一个包装器上div。

CSS：

.wrapper 
  width: 200px; 
  height: 300px; 
  background: url('http://placehold.it/200x800'), red; 
  background-size: auto 100%;
  background-repeat: no-repeat;

html：

<div class="wrapper"></div>

Demo

或者，如果您一心想要拥有一个额外的div，您可以像这样实现相同的效果：

CSS：

.wrapper 
    width: 200px; 
    height: 300px;
    background: red;


.inner-wrapper 
    width: 0;
    height: 100%;


.inner-wrapper img 
    height: 100%;

HTML：

<div class="wrapper">
    <div class="inner-wrapper">
        <img src="http://placehold.it/200x800">
    </div>
</div>

Demo

【讨论】：

我当然不希望图像被剪切。我希望它作为第一个例子

@DidacMontero 更新了我的答案 :-)

是的，您是对的，结果与他的第一个示例相同。但是我需要一个围绕 IMG 的 div 填充与 IMG 完全相同的区域，因为当我将孩子添加到具有绝对位置的 div 时，它应该相对于 IMG 是绝对的

所有这些东西都有固定的px值，你可以通过加减来找到合适的间距吗？或者更容易从左侧定位，这使得附加 div 的大小或存在无关紧要？如果不是，您能否更具体地说明您要解决的问题，而不是您认为需要解决的方法？我很难想象这将是多么必要。我认为您可能会让这变得更加复杂并为自己制造问题。

我的布局是响应式的，img 可以有任何大小。所以你的答案不适合我想要的。也许不清楚，但我想要的是：jsfiddle.net/umbreak/n6czk9xt/21

【参考方案2】：

如果你想让你的图片具有响应性，试试这个

<div style="width:40%; height: 80%; background: red;">
                <img src="http://placehold.it/200x800"/>

    </div>

CSS

img
    height:50%;
    width:50%;

（如果您希望它用于特定图像，那么您可以创建一个 ID 并提供此属性并将该 ID 用于该图像）

在小提琴上试试。

【参考方案3】：

我找到了解决方案，但不是纯 CSS。我不得不使用 JQuery，我对此并不满意，但它确实有效。

我很高兴听到一些纯 CSS 解决方案（具有响应式布局和任何图像大小），但到目前为止，这些解决方案都不适用于我的情况。

DEMO

HTML

<div class="container">
    <img src="//placehold.it/200x300" class="img-responsive centered" />
    <div class="img-wrapper centered">
        <div class="point" style="bottom: 0%; right: 0%;"></div>
        <div class="point" style="top: 0%; right: 0%;"></div>
        <div class="point" style="top: 0%; left: 0%;"></div>
        <div class="point" style="bottom: 0%; left: 0%;"></div>
    </div>
</div>

CSS

html, body height: 100%;
.container 
    position: relative;
    width: 100%;
    height: 100%;
    background: red;

.centered 
    position:absolute;
    max-width: 100%;
    max-height: 100%;
    right: 0%;
    top: 50%;
    transform: translateY(-50%);

.img-responsive 
    position: absolute;
    width: auto;
    height: auto;

.img-wrapper 
    max-height: 100%;
    max-width: 100%;

.point 
    background: green;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: -3px;
    position: absolute;

Javascript

//For better performance, use some of the plugins here: http://***.com/questions/10086693/jquery-resize-on-div-element
var img = $("img.img-responsive");
$(window).resize(function () 
    var wrapperImg = img.parent().find(".img-wrapper");
    if (img.width() !== wrapperImg.width() && img.height() !== wrapperImg.height()) 
        wrapperImg.width(img.width());
        wrapperImg.height(img.height());
    
);

//http://***.com/questions/3588102/jquery-load-not-working-on-my-image#answer-3590761
img.one('load', function () 
    $(this).parent().find(".img-wrapper").css(
        "max-width": this.naturalWidth + "px",
            "max-height": this.naturalHeight + "px",
            "width": this.width + "px",
            "height": this.height + "px"
    );
).each(function () 
    if (this.complete) $(this).load();
);