Question

创建CSS3 ONLY灯箱时遇到问题。这是我目前的代码：

div#image-1 {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  padding: 1%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
}

div#image-1 > div {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  border: 2px solid red;
}

div#image-1 > div > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

<div id="image-1">
  <div>
    <img src="https://pixabay.com/static/uploads/photo/2013/06/29/06/24/lotus-142028_960_720.jpg" alt="image-1" />
  </div>
</div>

我想要的是强制图像包含在红色div中，保留纵横比，以便通过调整窗口大小来自动调整大小。

我可以在没有红色容器的情况下这样做：

div#image-1 {
  position:fixed;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  padding:1%;
  text-align:center;
  background-color:rgba(0, 0, 0, 0.5);
}

div#image-1 > img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}

<div id="image-1">
  <img src="https://pixabay.com/static/uploads/photo/2013/06/29/06/24/lotus-142028_960_720.jpg" alt="image01" />
</div>

但我需要有红色容器才能添加其他内容（例如上一个/下一个按钮，......），我需要它与图片具有相同的高度。

我不想在像素中设置任何宽度或高度，因为我希望它具有响应性和屏幕自适应性。我不想强迫浏览器上传，所以如果图像小于窗口，我希望图像以默认大小显示，但如果图像较大，我希望它包含在红色div中

Answer 1

最简单的方法是将图片用作background-position: contain;

的背景图片

div#image-1 {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  padding: 1%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
}

div#image-1 > div {
  background: transparent url() center / contain no-repeat;
  min-width: 100%;
  min-height: 100%;
  display: inline-block;
  border: 2px solid red;
}

<div id="image-1">
  <div style="background-image: url(https://pixabay.com/static/uploads/photo/2013/06/29/06/24/lotus-142028_960_720.jpg);"></div>
</div>

Answer 2

我已经想到了这种可能性，但问题是我想在图像的每一侧添加上一个/下一个按钮，其宽度和图像的高度与下面的代码中的结果一样（我需要红色容器的主要原因是当图像小于窗口时

＆＃13;

div#image-1 {
  position:fixed;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  padding:1%;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:rgba(0, 0, 0, 0.5);
}

div#image-1 > img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}

div#image-1 > a {
  width:75px;
  height:100%; /*of the red div*/
  display:inline-block;
  border:2px solid blue;
}

＆＃13;

<div id="image-1">
  <a href="#previous"></a>
  <img src="https://pixabay.com/static/uploads/photo/2013/06/29/06/24/lotus-142028_960_720.jpg" alt="image01" />
  <a href="#next"></a>
</div>

＆＃13;

CSS3图像宽高比灯箱

2 个答案: