Question

我有一个定义宽度和高度的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 < / strong>即可。查看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。

实际上有办法吗？

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

Answer 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

example

或者，如果你已经死定了额外的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

example

Answer 2

如果您尝试使图像响应，请尝试此操作

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

    </div>

CSS

img{
    height:50%;
    width:50%;
}

（如果您想要特定图像，您可以创建一个ID并提供此属性并为该图像使用该ID）

尝试小提琴。

Answer 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://stackoverflow.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://stackoverflow.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();
});

使img响应并填入div

3 个答案: