如何在响应式设计中使用CSS创建一个图像网格,使得不同宽高比的图片能够在相同高度行和相同宽度列中整齐排列?以下是一个带有网格的示例页面:http://destadesign.com/test/capricorn/test.html。第二行的图像超出了网格范围。
响应式设计要求我们使用百分比(%)值而非固定像素值,只针对宽度,这样高度就会自动计算,这在这种情况下会使事情变得复杂。
我认为可以使用图像的剪切蒙版(?)来实现这一点(相同大小的div容器,包含不同大小的图像),但我缺乏创建这种复杂CSS的技能。任何具体的帮助都将不胜感激,但一些一般性的想法和指导也将非常有用。
HTML div-imgage框具有这样的(相当自然的)结构:
请使用这个CodePen以方便操作: http://codepen.io/anon/pen/GopQPZ
响应式设计要求我们使用百分比(%)值而非固定像素值,只针对宽度,这样高度就会自动计算,这在这种情况下会使事情变得复杂。
我认为可以使用图像的剪切蒙版(?)来实现这一点(相同大小的div容器,包含不同大小的图像),但我缺乏创建这种复杂CSS的技能。任何具体的帮助都将不胜感激,但一些一般性的想法和指导也将非常有用。
HTML div-imgage框具有这样的(相当自然的)结构:
<div id="1" class="figure">
<a href="#" class="link1">
<img src="images/pic_mountain.jpg" alt="TARGI W PARYŻU">
<div class="figcaption">
<h4>test 1</h4>
</div>
</a>
</div><!-- /end .figure -->
使用非必要的hover和文本居中效果的CSS:
.figure {
position: relative;
float: left;
width: 10%;
margin-right: 1%;
left:20px;
}
.figure a{
display:block;
width:100%;
height:100%;
position:relative;
z-index:2;
}
.figure a img{
width:100%;
display:block;
}
.figcaption {
font-size: 0.8em;
letter-spacing: 0.1em;
text-align: center;
position: absolute;
top: 0;
left:0;
width:100%;
z-index: 2;
height:100%;
background-color:rgba(0,0,0,.4);
transition:all 0.4s ease;
}
.figcaption h4{
position:absolute;
top:50%;
left:50%;
padding:0;
margin:0;
-moz-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
.figure a:hover .figcaption {
opacity:0;
}
请使用这个CodePen以方便操作: http://codepen.io/anon/pen/GopQPZ