流体容器内流体图像

Question

我正面临一个相当具有挑战性的html/css问题。我正试着用缩略图建一个图片库。设计必须是流动的，能够缩小移动规模。

要求，

1. 无论图像大小如何，容器都需要保持4:3的纵横比。
2. 容器最大宽度665 max和最小宽度:300 max
3. 内部图像需要对齐中心/中间
4. 当浏览器将容器缩小到满足其中一个图像大小的点时，图像必须与容器一起缩小。

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

JS Fiddle示例

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%的图像来使图像缩放。我还是不能让它垂直对中。

Answer 1

若要将图像居中，请在img css添加上

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

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

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

Answer 2

你有这样的选择

背景图像，而不是实际图像，只是有一个缩略图，至少有一个最小的高度和宽度。然后使用图像作为背景，中心，和不重复。

可缩放图像宽度：只是有一个缩略图，至少有一个最小的高度和宽度，然后把你的内部与100%的宽度。

你的第二个选择是最简单的方法。我简单地添加了宽度:100%添加到#image http://jsfiddle.net/3e90xxge/#image div img { width: 100%}