Как создать отзывчивый div с img в нем?

Question

Я хотел бы создать отзывчивый div (box1), который должен соответствовать его размеру контента автоматически, а также у меня есть ограничение для этого контента, которое не должно превышать определенное значение (ширина и высота) box1 здесь я даю 600x300,

Вот код и пример

 .box1
    {
       width:auto;
       height:auto;
       background-color:chocolate;
       margin-left:auto;
       margin-right:auto;
       max-width: 600px;
       max-height:300px;
       padding:5px;

    }

я использовал max-width :600px; а также max-height:300px; поэтому содержание внутри него не будет превышать выше box1 согласно моей вере.

.box1 img
    {
        max-width: 100%;
        max-height: 100%;
    } 

Вот изображение внутри box1 не будет превышать box1 ширина и высота.

Сейчас
1) если изображение выше чем box1 ширина и высота 600x300px скажи 750x750px в этом случае изображение должно соответствовать box1 с 600x300px

2) если изображение меньше чем 600x300px скажи 200x150px тогда box1 следует настроить автоматически по размеру изображения.

Как этого можно достичь? что не так в моем коде к этой концепции? кто-нибудь может помочь?

Answer 1

Вот один из способов сделать это с помощью CSS

Рассмотрим следующий HTML, я включаю четыре изображения с различными пропорциями, чтобы проиллюстрировать, что это работает. .wrap Элемент должен показать вам, что вы можете центрировать изображение внутри его родительского блока.

<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/500/500">
    </div>
</div>
<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/800/200">
    </div>
</div>
<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/200/800">
    </div>
</div>
<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/200/200">
    </div>
</div>

Хитрость заключается в том, чтобы установить display: inline-block за .box1, что заставит его сжиматься, чтобы соответствовать содержимому с учетом ограничений max-width и max-height.

.box1 {
    width:auto;
    height: auto;
    max-width: 600px;
    max-height: 300px;
    background-color:chocolate;
    padding:5px;
    display: inline-block;
}

Для правильного масштабирования изображения просто наследуйте значения max-width и max-height:

.box1 img {
    vertical-align: top;
    max-width: inherit;
    max-height: inherit;
}

использование vertical-align: top избавиться от любого пустого пространства рядом с тегом изображения.

Наконец, так как .box1 это встроенный блок, вы можете отцентрировать его в родительском контейнере, используя text-align: center:

.wrap {
    border: 1px dotted gray;
    margin: 1.00em 0;
    text-align: center;
}

Демонстрационная скрипка находится по адресу: http://jsfiddle.net/audetwebdesign/hpbdC/

Answer 2

img {
    width: 100%;
    height: auto;
    max-height: 100%;
}

должно работать (я полагаю, вы хотите сохранить соотношение сторон)

Answer 3

По умолчанию box1 обрабатывается как элемент display: block. Если вы измените этот тип отображения на встроенный блок (например: display: inline-block), он будет рассматриваться как настраиваемый элемент.

Имейте в виду, что вы устанавливаете максимальную высоту коробки в 300 пикселей. Поэтому максимальная высота изображения составляет триста. В случае изображения размером 750 на 750 пикселей, оно будет изменено на изображение размером 300 на 300 пикселей (как и в окне).

Answer 4

Зачем вам нужен упаковочный div? Вы можете достичь этого, только стилизовав изображение: http://jsfiddle.net/Rv7JG/1/

img {
    max-width: 600px;
    max-height: 300px;
    height: auto;
    width: 100%;
    padding: 5px;
    background: chocolate;
}