жидкость изображение внутри контейнер для жидкости

Я столкнулся с довольно сложной проблемой html/css. Я пытаюсь создать галерею изображений с эскизами ниже. Дизайн должен быть жидким и иметь возможность масштабирования для мобильных устройств.жидкость изображение внутри контейнер для жидкости

Требования,

Контейнер должен поддерживать соотношение сторон 4: 3, независимо от изображения размера в пределах
Контейнер макс ширина 665px и мин-ширина: 300px
изображения в пределах потребностей, align center/middle
Когда браузер масштабирует контейнер до точки, в которой он соответствует одному из размеров изображения, изображение должно уменьшать с помощью контейнера.

Я успешно смогла получить контейнер для правильного масштабирования с помощью приведенного ниже кода, но изображение не поддерживает вертикальную середину и не масштабируется с контейнером. Контейнер масштабируется позади изображения, как если бы изображение просто плавало поверх контейнера.

JS Фидл Пример

http://jsfiddle.net/2kmtmzxv/18/

Пример кода

<div id="image-container"> 
    <div id="dummy"></div> 
    <div id="image"> 
     <div> 
      <img src="http://www.gannett-cdn.com/-mm-/d3038439ef7e9ad854298da49122ea72ad452f6a/c=186-0-2724-1908&r=x513&c=680x510/local/-/media/USATODAY/USATODAY/2014/08/22/1408738143000-2015-Chevrolet-CorvetteZ06-026.jpg"/> 
     </div> 
    </div> 
</div>

CSS

#image-container {display:inline-block;position:relative;width:100%;max-width:665px;min-width:300px} 
#dummy {padding-top:75%/* 4:3 aspect ratio */} 
#image {position:absolute;top:0;bottom:0;left:0;right:0;background-color:grey} 
#image div img{display:block;margin:auto;vertical-align:middle;width:100%;max-width:400px}

ОБНОВЛЕНИЕ

Я смог получить изображение для масштабирования, добавив ширину: 100% к изображению. Я все еще не могу заставить его вертикально выравнивать середину.

источник

2014-10-02 Code Junkie

он не будет работать в старых браузерах, но с использованием CSS3 известково может помочь выполнить эту –

Для размещения изображения на IMG CSS добавить

positon:absolute; top:0; bottom:0; left:0; right:0;

Это будет абсолютно позиционировать изображение относительно его ближайший, не статический элемент (в данном случае #image)

Вот скрипку: http://jsfiddle.net/dzgvh453/

источник

2014-10-02 03:21:11 Lorien

именно то, что я искал, спасибо. –

После некоторого тестирования я обнаружил, что изображение, которое меньше максимальной ширины, растягивается при использовании 100%. Есть ли у вас какие-либо предложения по их устранению? –

nvm разрешенный дисплей: нет; margin: auto; max-width: 100%; height: auto; width: auto! Important; position: absolute; top: 0; bottom: 0; right: 0; left: 0} –

у вас есть это варианты

Фоновое изображение вместо фактического изображения У вас есть миниатюра, которая по крайней мере имеет минимальную высоту и ширину. затем используйте изображение в качестве фона, центра и без повтора.

масштабируемая ширина изображения: Просто есть эскиз, что по крайней мере, имеет мин-высоту и ширину, а затем положить ваш внутри него с шириной 100%.

Ваш второй вариант - это самый простой способ сделать это. Я просто добавил ширина: 100% #image Див IMG http://jsfiddle.net/3e90xxge/#image div img { width: 100%}

источник

2014-10-02 03:23:13 CMartin14

As выше, я смог выяснить, как правильно масштабировать изображение с шириной: 100%, но я не могу понять, как получить изображение до вертикального выравнивания по середине. Боюсь, что фоновое изображение не является вариантом для этой задачи. –

жидкость изображение внутри контейнер для жидкости

ответ

Смежные вопросы