Html 使img具有响应性并填写到div中

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

结果是错误的，因为img覆盖在div上。我希望img像第一个示例中那样调整大小

在中，他们指出div需要有一个高度和宽度，但是div不会填充整个img

真的有办法吗

---

我的整个布局更为复杂，并且在顶部有flex，完全响应，这里的示例只是一个近似的例子，主要关注我遇到的问题。因此，任何具有固定高度和宽度的解决方案都是错误的。

不要使用额外的

div

。只需使用

背景图像

。更清晰、更容易、更具语义。可以在一个包装器

div

上绝对定位内容

CSS:

HTML:

HTML:

---

不要使用额外的

div

。只需使用

背景图像

。更清晰、更容易、更具语义。可以在一个包装器

div

上绝对定位内容

CSS:

HTML:

HTML:

---

如果您想让您的图像更具响应性，请尝试此方法

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

    </div>

（如果您想将其用于特定的图像，您可以创建一个ID并赋予此属性，然后将该ID用于该图像）

---

用提琴试一试。

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

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

    </div>

（如果您想将其用于特定的图像，您可以创建一个ID并赋予此属性，然后将该ID用于该图像）

---

在小提琴上试试。

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

我很高兴听到一些纯粹的CSS解决方案（具有响应性的布局和任何图像大小），但到目前为止，所提供的解决方案中没有一个适合我的情况

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>

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();
});

---

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

我很高兴听到一些纯粹的CSS解决方案（具有响应性的布局和任何图像大小），但到目前为止，所提供的解决方案中没有一个适合我的情况

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>

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();
});

---

当然，我不希望图像被剪切。我想要它作为第一个example@DidacMontero更新我的答案：-）是的，你是对的，结果与第一个例子相同。但是我需要一个在IMG周围的div，填充与IMG完全相同的区域，因为当我用绝对位置向div中添加一个子元素时，它应该是绝对的，相对IMGAll，这些东西有固定的px值，你能加和减以找到正确的间距吗？或者从左边更容易的位置，使得额外div的大小或存在无关？如果没有，你能更具体地说明你正在试图解决的问题，而不是你认为你需要解决它的方法吗？我很难想象这是多么必要。我想你可能会把这件事弄得更复杂，给自己制造麻烦。我的布局很灵敏，img可以有任何尺寸。所以你的回答对我的要求不起作用。也许不清楚，但我想要的是这样的：当然，我不希望图像被剪切。我想要它作为第一个example@DidacMontero更新我的答案：-）是的，你是对的，结果与第一个例子相同。但是我需要一个在IMG周围的div，填充与IMG完全相同的区域，因为当我用绝对位置向div中添加一个子元素时，它应该是绝对的，相对IMGAll，这些东西有固定的px值，你能加和减以找到正确的间距吗？或者从左边更容易的位置，使得额外div的大小或存在无关？如果没有，你能更具体地说明你正在试图解决的问题，而不是你认为你需要解决它的方法吗？我很难想象这是多么必要。我想你可能会把这件事弄得更复杂，给自己制造麻烦。我的布局很灵敏，img可以有任何尺寸。所以你的回答对我的要求不起作用。也许不清楚，但我想要的是：

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

    </div>

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

<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>

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;
}

//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();
});