CSS缩放几个图像以适应视口保持宽高比

@H_403_1@我正在创建一个画廊,我想从一张专辑中列出所有图片： 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％的高度.他们会留在文件的流程中.

CSS缩放几个图像以适应视口保持宽高比

解决方法

猜你在找的CSS相关文章