Min*_*low 16 css image scale aspect-ratio
我正在创建一个图库,我想在一个页面上列出相册中的所有图像:大图片样式:
与Big Picture不同,我希望图像按比例缩放以适应容器的宽度div(.section-images设置为margin: auto 2em;宽度是用户浏览器的宽度减去2*2em)尽可能不使它们大于90%的高度视口.
正如您想象的那样,400x600缩放以适应宽度的肖像照片将会很长,用户将无法在屏幕上看到整个图像,这就是为什么我需要将宽度缩放限制为不超过90%的高度.
<section class="section-images">
<div class="image-box">
<div class="image-large">
<a href="#"><img foo1></a>
</div>
<div class="image-description">
blabla1
</div>
... MORE IMAGES WITH DESCRIPTONS ...
</div>
etc
</section>
在我拥有的每张图片下.image-description,这个高度会有所不同.
重要的是,在任何时候,单个图像(so .image-large)应该适合视口,无论它是横向还是纵向.
如果可能的话我想只用CSS做这个,如果CSS不可能只用javascript.
web*_*iki 26
解决方案:( 我剥离了大部分容器,使其易于理解和使用)
html,
body,
.section-images {
height: 100%;
margin: 0;
}
.section-images {
margin: auto 2em;
text-align: center;
}
img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 90%;
margin: 20px auto;
}<section class="section-images">
<a href="#"><img src="http://i.imgur.com/hMRnvUx.jpg" /></a>
<div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
<a href="#"><img src="http://i.imgur.com/lBuIEDh.jpg" /></a>
<div class="image-description">blabla2</div>
<a href="#"><img src="http://i.imgur.com/k8BtMvj.jpgg" /></a>
<div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
</section>说明:
该解决方案基于以下事实:百分比大小(宽度和高度)相对于父元素的大小.
通过设置考虑.section-images是一个直接的孩子<body>:
html, body, .section-images {
width:100%;
height:100%;
margin:0;
}
因此图像的直接父级等于视口大小.
然后,您可以使用以下方法轻松调整图像大小
img{
width:auto;
height:auto;
max-width:100%;
max-height:90%;
}
在保持纵横比的同时,图像的宽度和视口高度不会超过 100%.他们将留在文件的流程中.
您也可以使用视口单元执行此操作而无需更改html, bodyIE9 +.
img {
width:auto;
height:auto;
max-width:100%;
max-height:90vh;
}
| 归档时间： |
|
| 查看次数： |
38592 次 |
| 最近记录： |