我想缩放图像,使它们水平和垂直居中,然后垂直拉伸,直到它们垂直填满整个屏幕。可能有白色边框。
图像应保持其纵横比。我添加了一张我想做的照片。图像应根据屏幕的分辨率进行调整。
从上到下,应始终有图像。如果您调整屏幕大小,图像应该调整并变小,以便屏幕仍然垂直填充,从上到下有3张图像。
我不知道如何更清楚地解释它......
这就是我得到的:
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body html{
text-align:center;
margin: 0 auto;
}
.clear {
clear: both;
}
#grid {
height: 100%;
position:absolute;
margin: 0 auto;
}
.grid-element {
width: auto;
height: 33%;
float: left;
}
.stretch {height:100%; width: auto; }
</style>
</head>
<body>
<div id="grid">
<div class="grid-element">
<img src="fotos/bscasino.jpg" class="stretch" />
</div>
<div class="grid-element">
<img src="fotos/frankpollet13.jpg" class="stretch"/>
</div>
<div class="grid-element">
<img src="fotos/groep.jpg" class="stretch"/>
</div>
<div class="grid-element">
<img src="fotos/groepbscasino.jpg" class="stretch"/>
</div>
<div class="grid-element">
<img src="fotos/kleurpotloden.jpg" class="stretch" />
</div>
<div class="grid-element">
<img src="fotos/paulverrept.jpg" class="stretch" />
</div>
<div class="grid-element">
<img src="fotos/penselen.jpg" class="stretch" />
</div>
<div class="grid-element">
<img src="fotos/groep.jpg" class="stretch" />
</div>
<div class="grid-element">
<img src="fotos/groep.jpg" class="stretch" />
</div>
</div>
</body>
答案 0 :(得分:1)
这是演示:
<强> https://jsbin.com/rafute/edit?css,output 强>
html, body{
text-align : center;
margin : 0 auto;
height : 100%;
}
#grid {
position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
margin : 0 auto;
font-size : 0;
}
.grid-element {
width : 33.333%;
height : 33.333%;
float : left;
position : relative;
overflow : hidden;
}
.grid-element img{
position : absolute;
top : 50%;
left : 50%;
width : 150%;
transform : translate(-50%,-50%);
}
@media (max-width: 900px) {
#grid .grid-element img{ height:100.5%; width:auto; }
}
这将有效地呈现3x3
图像网格,这些图像始终适合浏览器窗口,图像将尽可能完美地填充网格,并进行一些裁剪 - 当然,因为图像有自己的纵横比,3x3
网格具有动态纵横比。
答案 1 :(得分:1)
这是一个如何让3x3网格覆盖高度的开始。宽度设置为90%,但您可以根据需要进行设置,使用最小/最大宽度也可以将其限制为更大/更小的屏幕。
这将为您提供一个大小均匀的图像,较小的图像将按比例放大以适应高度和更大的比例,并且所有图像均在每一侧均匀分配。
body, html{
margin: 0;
padding: 0;
height: 100%;
}
#grid {
height: 100%;
width: 90%;
margin: 0 auto;
}
.grid-row {
height: 33%;
}
.grid-element {
width: 30%;
height: 94%;
display: inline-block;
border: 1px solid black;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.img1, .img4, .img7 {
background-image: url(http://placehold.it/150x50);
}
.img2, .img5, .img8 {
background-image: url(http://placehold.it/350x200);
}
.img3, .img6, .img9 {
background-image: url(http://placehold.it/550x350);
}
<div id="grid">
<div class="grid-row">
<div class="grid-element img1">
</div>
<div class="grid-element img2">
</div>
<div class="grid-element img3">
</div>
</div>
<div class="grid-row">
<div class="grid-element img4">
</div>
<div class="grid-element img5">
</div>
<div class="grid-element img6">
</div>
</div>
<div class="grid-row">
<div class="grid-element img7">
</div>
<div class="grid-element img8">
</div>
<div class="grid-element img9">
</div>
</div>
</div>