сделать img отзывчивым и заполнить div

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> 

Теперь я хочу в DIV, обернутый на IMG (который пристреливается точно по ширине 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 сверху, и пример здесь - это просто приближение, сосредоточенное на проблеме, которую я имею. Поэтому любое решение с фиксированной высотой и шириной будет неправильным.

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

В качестве альтернативы, если вы решительно настроены на использование дополнительного 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

Answer 2

Попробуйте это, если вы пытаетесь сделать изображение отзывчивый

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

    </div> 

CSS

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

(если вы хотите его для конкретного изображения THN вы можете создать идентификатор и дать эти свойства и использовать этот идентификатор для этого изображения)

Попробуйте на скрипке.

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