Question

我有一些问题集中在屏幕上具有可变高度和宽度的弹出式div。我们的想法是将它用于一个简单的照片库。我知道这个问题已被问了一百万次，我现在已经在网上搜索了半天，但大多数解决方案似乎都不符合我的要求（或者只是不工作）......不过，我有一种可怕的感觉，我错过了一些超级简单的东西，但我今天似乎无法把它弄好......

要求如下：

图像应水平和垂直显示在屏幕中央。
应保留图像的宽高比。
如果图像较大它的容器的最小宽度/最小高度应该调整大小直到它达到100％或直到它匹配max-width / max-height为止它的容器。
容器div应该适合图像而不添加边距，以确保其他控制元素可以定位
正确。
页面的大小和图像的大小都不知道，图像可以是纵向的，也可以是横向的。因此，不可能设置固定的宽度/高度。

我到目前为止使用的结构已经使用了table或divs with display：table;或显示：table-cell;使包含图像的div居中。这似乎没问题，但可能有更好的解决方案......

但是，我无法让图像可靠地尊重父容器的max-width / max-height属性。我想这是因为如果容器div没有固定的尺寸，图像上的宽度/高度规格确实不起作用。有办法解决这个问题吗？

为了说明我一直在做的事情，我创建了一个简单的细分，例如jsfiddle.net。请不要过分关注代码的清洁度（这只是一个简单的例子）。

HTML：

<div id="overlay" class="overlay" onclick="this.style.display='none';">
  <table class="overlay">
    <tr>
      <td>
        <div class="lightbox"><img id="photo" alt="Foto" src="http://placehold.it/1200x300"></div>
      </td>
    </tr>
  </table>
</div>

<a href="javascript:void(0);" onclick="document.getElementById('photo').src = 'http://placehold.it/1200x300';
  document.getElementById('overlay').style.display = 'block';">Very wide image.</a>
<br>
<a href="javascript:void(0);" onclick="document.getElementById('photo').src = 'http://placehold.it/300x1200';
  document.getElementById('overlay').style.display = 'block';">Very tall image.</a>

CSS：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

div.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: scroll;
  display: none;
}

table.overlay {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  empty-cells: show;
}

table.overlay td {
  vertical-align: middle;
  text-align: center;
  border: 4px solid green;
}

div.lightbox {
  display: inline-block;
  margin: 0;
  padding: 0;
  min-width: 50px;
  min-height: 50px;
  max-height: 80%;
  max-width: 80%;
  background-color: #ffffff;
  font-size: 0;
  border: 4px solid red;
}

div.lightbox img {
  max-width: 100%;
  min-width: 100%;
  border: 4px solid purple;
}

在这个例子中，＆＃34;非常宽的图像＆＃34;显示正确，但＆＃34;非常高的图像＆＃34;占据页面高度的100％以上。这显然取决于您的浏览器窗口尺寸，但我希望这说明了我的问题。

我已尝试过很多不同的变体。除此之外，我尝试过使用溢出，但这不是一个选项，因为我既不需要滚动条也不想剪辑。

有人可以向我解释我失踪了吗？

最后一件事：我不介意使用javascript，因为内容也会用javascript填充。但是，我真的不想使用jquery或其他框架...

谢谢！

Answer 1

我几乎可以肯定，如果不使用javascript，你将无法解决这个问题。

下面的示例使用了不引人注目的javascript ，它可以扩展：

var overlay = document.getElementById('overlay');

function hideOverlay() {
document.getElementById('overlay').style.display='none';
}

overlay.addEventListener('click',hideOverlay,false);


var initiateDisplayImage = []

function displayImage(i) {

var photoSources = [
'http://placehold.it/1200x300',
'http://placehold.it/300x1200'
];

var overlay = document.getElementById('overlay');
overlay.style.display = 'block';

var photo = document.getElementById('photo');
photo.src = photoSources[i];

photo.style.width = '';
photo.style.height = '';

function photoDimensions() {
var photoWidth = photo.clientWidth;
var photoHeight = photo.clientHeight;
var photoRatio = photoWidth / photoHeight;

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

if (photoWidth > windowWidth) {
photo.style.width = (windowWidth - 40)  + 'px';
photoWidth = photo.clientWidth;
photo.style.height = (photoWidth / photoRatio)  + 'px';
}

if (photoHeight > windowHeight) {
photo.style.height = (windowHeight - 40)  + 'px';
photoHeight = photo.clientHeight;
photo.style.width = (photoHeight * photoRatio)  + 'px';
}
}

photo.addEventListener('load',photoDimensions,false);

}


function initiateDisplayImageFunction(i) {
return function(){
var anchor = document.getElementsByTagName('a')[i];
anchor.addEventListener('click',function(){displayImage(i);},false);};
}

function initiateDisplayImages() {
var anchors = document.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++) {
initiateDisplayImage[i] = initiateDisplayImageFunction(i);
initiateDisplayImage[i]();}
}

window.addEventListener('load',initiateDisplayImages,false);

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

div.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: scroll;
  display: none;
}

table.overlay {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  empty-cells: show;
}

table.overlay td {
  vertical-align: middle;
  text-align: center;
  border: 4px solid green;
}

div.lightbox {
  display: inline-block;
  margin: 0;
  padding: 0;
  min-width: 50px;
  min-height: 50px;
  max-height: 80%;
  max-width: 80%;
  background-color: #ffffff;
  font-size: 0;
  border: 4px solid red;
}

div.lightbox img {
  max-width: 100%;
  min-width: 100%;
  border: 4px solid purple;
}

<div id="overlay" class="overlay">
  <table class="overlay">
    <tr>
      <td>
        <div class="lightbox"><img id="photo" alt="Foto" src="http://placehold.it/1200x300"></div>
      </td>
    </tr>
  </table>
</div>

<a href="#">Very wide image.</a>
<br>
<a href="#">Very tall image.</a>

垂直和使用可变大小

1 个答案: