流体容器内的流体图像

Question

我正面临一个相当具有挑战性的 html/css 问题。我正在尝试用下面的缩略图构建一个图片库。设计需要流畅并且能够针对移动设备进行缩减。

要求，

1. 无论图像如何，容器都需要保持 4:3 的纵横比 大小范围内
2. 容器最大宽度为 665 像素，最小宽度为 300 像素
3. 内的图片需要居中/中间对齐
4. 当浏览器将容器缩小到满足其中一种图像尺寸的点时，图像必须缩小 与容器。

我已经成功地使用下面的代码使容器正确缩放，但是图像不保持垂直中间，也不随容器缩放。容器在图像后面缩放，就好像图像只是漂浮在容器顶部一样。

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}

更新

我可以通过向图像添加 width:100% 来缩放图像。我仍然无法让它垂直对齐中间。

Answer 1

为了使图像居中，在img css上添加

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

这将绝对定位图像相对于其最近的非静态元素（在本例中为#image）

这是一个小提琴：http://jsfiddle.net/dzgvh453/

Answer 2

你有这个选项

背景图片而不是实际图片 只需要有一个至少具有最小高度和宽度的缩略图。然后将图像用作背景、中心和不重复。

可缩放图像宽度： 只需要有一个至少具有最小高度和宽度的缩略图，然后以 100% 的宽度放入其中。

您的第二个选项是最简单的方法。我只是将 width:100% 添加到#image div img http://jsfiddle.net/3e90xxge/#image div img { width: 100%}