我正在创建一个画廊,我想从一张专辑中列出所有图片：
Big Picture style：
与大图不同,我希望图像按比例缩放以适应容器div的宽度(.section-images,设置为margin：auto 2em;因此它的宽度是用户浏览器的宽度减去2 * 2em)尽可能地不使它们大于视口的90％的高度.
按照你的想象,一个400×600的肖像照片,当缩放到适合宽度将是如此之长,用户将看不到整个图像在屏幕上,这就是为什么我需要限制宽度缩放不超过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描述,这个高度会有所不同.
重要的是,无论是风景还是肖像,任何时候,单个图像(如.image-large)都应该适合在视口中.
我想这样做只使用CSS,如果可能的话,只有JavaScript,如果CSS是不可能的.
解决方法
解决方案
(我将大部分容器划分成容易理解和使用的容器)
(我将大部分容器划分成容易理解和使用的容器)
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,.section-images {
width:100%;
height:100%;
margin:0;
}
因此图像的直接父级等于视口大小.
然后,您可以使用以下方式轻松地缩放图像：
img{
width:auto;
height:auto;
max-width:100%;
max-height:90%;
}
在保持其纵横比的同时,图像不会超过视口的100％宽度和90％的高度.他们会留在文件的流程中.
