Question

我正面临一个相当具有挑战性的html / css问题。我正在尝试使用下面的缩略图构建一个图库。设计需要流畅，并且能够缩小以适应移动设备。

要求，

无论图像如何，容器都需要保持4：3的宽高比
容器最大宽度为665px，最小宽度：300px
图片内需要对齐中间/中间
当浏览器将容器缩小到与其中一个图像大小相符的位置时，图像必须缩小用容器。

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

JS小提琴示例

示例代码

<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 add

上

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

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

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

Answer 2

您有此选项

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

可扩展图片宽度 只需要一个至少具有最小高度和宽度的缩略图，然后将其放入100％宽度内。

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

流体容器内的流体图像

2 个答案: