CSS: Как масштабировать <img> для покрытия всего родительского <div>?

Вопрос:

http://jsfiddle.net/Log82brL/15/

<img> не сжимает упаковку, как я ожидал бы с помощью min-width:100%

Я пытаюсь сжать <img>, пока высота или ширина не совпадут с контейнером

Щелкните в любом месте <iframe> для отображения форм контейнера

Попробуйте отредактировать <img> CSS:

1) СОХРАНЕНИЕ АППАРАТА

2) ПОКРЫТИЕ ПОЛНАЯ ПОВЕРХНОСТЬ ОБЛАСТИ КОНТЕЙНЕРА DIV

3) ТОЛЬКО ИЗМЕНИТЬ ИЗОБРАЖЕНИЕ

Этот подход к центрированию выглядит как эскиз, но он довольно прочный

Мой вопрос конкретно: масштабируйте <img> до FILL (поддерживайте пропорции, но покрывайте всю поверхность) родительского <div>, даже когда родительский <div> изменяет размер

Возможно, я как-нибудь смогу использовать css flex box-layout или что-то еще? Может быть, трансформация?

ANSWER

http://jsfiddle.net/Log82brL/17/

Установите источник HTML в прозрачный base64-пиксель (кредит CSS-трюки)

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

Использовать свойство фона CSS

#img {
    width: 100%;
    height: 100%;
    background: url(http://i.imgur.com/0BBsCUB.gif) no-repeat center;
    background-size: cover;
}

Ответы

Ответ 1

Если вы не хотите прикасаться к контейнеру, поместите фон в <img>

#img
{ 
  background: url(imgpath) no-repeat center;
  background-size: cover;
}

Ответ 2

http://jsfiddle.net/Log82brL/7/

#img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit: обложка позволяет размеру замещаемого содержимого поддерживать его соотношение сторон при заполнении поля содержимого всего содержимого: его размер конкретного объекта разрешен как ограничение покрытия для элементов, используемых шириной и высотой.

Ответ 3

Вы можете использовать CSS background вместо HTML img.

.myDiv
{
  height: 400px;
  width: 300px;
  background-image: url('image-url.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border: 1px solid #000000;
}

<div class="myDiv">
</div>

Вот JS Fiddle Demo.
Попытайтесь изменить height и width - вы увидите, что изображение растягивается, чтобы заполнить div.

Вы также можете использовать разные значения background-size:

Пропорциональное растяжение, содержащее: background-size: contain;
Слишком высокий div
Слишком широкий div
Пропорциональное растяжение для заполнения: background-size: cover;
Слишком высокий div
Слишком широкий div
Стретч для заполнения 100%: background-size: 100% 100%;
Слишком высокий div
Слишком широкий div

Ответ 4

Использовать краткое описание одного символа css

.myDiv
{
  height: 400px;/*whatever you want*/
  width: 300px;/*whatever you want*/
  background: url('image-url.png') no-repeat center center;
  background-size: contain;
}

<div class="myDiv">
</div>

Ответ 5

Пробовал ли вы bootstrap-решение

http://getbootstrap.com/css/#images-responsive

что в значительной степени

.img-responsive
{
max-width: 100%;
height: auto; 
display: block;
}

Добавление к вашему обновленному вопросу

http://jsfiddle.net/arunzo/Log82brL/5/

.skinny>img
{
    max-width:none !important;
    min-height:none !important;    
    max-height:100%;
    -webkit-transform:translate3d(+50%, +50%, 0);
}

И все же я не уверен, что вы ищете, извините за отрывистую анимацию.

Ответ 6

A назад я нашел решение jQuery под названием backstretch. Теперь это выглядит с помощью CSS3; со страницы:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Ответ 7

http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div

содержит AND с центром

Я думаю, что это рендеринг, который вы пытаетесь получить, это может помочь;)

https://jsfiddle.net/erq1otL4/

<div id="container" style="background-image: url(http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg);"></div>   

#container.skinny {
width: 400px;
height:600px;
}
#container {
    width: 400px;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-color:pink;
    background-position: center center;
}

var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");

Ответ 8

Обновлен ответ. Теперь работает по назначению.

var toggle = false,
    containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");

#container {
    overflow: hidden;
    width: 400px;
    height: 200px;
    transition: all .5s;
    margin: 0 auto; /* this is just for demonstration purposes */
}
#container.skinny {
    width: 200px;
    height:600px;
}
#img {
    height: auto;
    left: 50%;
    margin: auto;
    min-height: 100%;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%); /* changed to 2d translate */
    width: 100%; /* full width in wide mode */
}

#container.skinny #img {
    width: auto; /* width reset in tall mode */
}

<div id="container">
    <img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>

Ответ 9

Обычно для достижения этого необходимо использовать:

parentdiv img {
   width:100%;
   height:auto;}

чтобы изменить размер изображения с родительским div.

Это может вызвать некоторые проблемы с обрезкой (визуально), если вы установите скрытие переполнения.

Ответ 10

Попробуйте следующее:

<div class="img_container">
   <img src="image/yourimage.jpg" alt="" />
</div>

<style type="text/css">
   .img_container{
      width: 400px;
      height: 400px;
      overflow: hidden;
    }
   .img_container img{
       width: 100%;
       height: auto;
     }
 </style>

установка высоты, или с авто, не будет выглядеть растянутым.

Ответ 11

Используйте этот класс Bootstrap.img-responsive и если родительские изменения div добавляют медиа Запросы к изображению и div как

Ответ 12

Вот очень простое решение CSS, которое не требует изменения атрибутов тега img.

div{
            background-image: url("http://www.frikipedia.es/images/thumb/d/d5/Asdsa-asdas.jpg/300px-Asdsa-asdas.jpg");
            height: auto;
            width: 400px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
        }

Ответ 13

Вы используете imgLiquid https://github.com/karacas/imgLiquid

$(function() {
    $(".imgLiquidFill").imgLiquid({
        fill: true,
        horizontalAlign: "center",
        verticalAlign: "top"
    });    
    $(".imgLiquidNoFill").imgLiquid({
        fill: false,
        horizontalAlign: "center",
        verticalAlign: "50%"
    });
});

.boxSep{
    background-color:#f7f7f7;
    border: 2px solid #ccc;
    margin:10px;
    display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/karacas/imgLiquid/master/js/imgLiquid-min.js"></script>

<div class="boxSep" >
    <div class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
        <img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
    </div>
</div>

<div class="boxSep" >
    <div class="imgLiquidNoFill imgLiquid" style="width:250px; height:250px;">
        <img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
    </div>
</div>