保持高寬比為60％的圖像

Question

我要完成的工作：
-創建一個以視圖為中心的彈出式div（固定）
-此彈出窗口應為瀏覽器窗口高度的60％
-彈出窗口的內容應為圖片，並且圖片的右上角應為'x'
-考慮到圖片的高度應與“ x”一起包含在div中，因此圖片的高度應為最大
-應保持圖像的高寬比

我嘗試了以下代碼

<div class="pop-up">
  <p class="exit-button">x</p>
  <img class="image" src="safari.png" width="1200" height="630" alt="" title="" />
</div>

使用CSS：

body {
  background: #333;
}
.pop-up {
  position: fixed; 
  height: 60%; 
  width: auto; 
  left:50%; 
  top:50%;
  -webkit-transform:translate(-50%,-50%); 
  transform:translate(-50%,-50%);
  background:yellow;
  object-fit: contain;
}    
.exit-button {
   text-align: right;
   margin: 0;
   font-size: 300%;    
}
.image {
  height: 100%; 
  width: auto;
  opacity:0.7;
}

此代碼不能解決問題，圖像不包含在（黃色）div中，如以下屏幕截圖所示：

http://www.michielvisser.nl/tmp/screenshot.jpg

如何在div中包含最大高度的div中的圖像並保持縱橫比？

---

解決方案1：從.pop-up中刪除高度和寬度，然后將.image中的height：100％更改為height：60vh。 那很好。 顯然，子級（img）不會適應父級（div），但是父級（div）將適應子級（img）。 聽起來像現實生活。

解決方案2：本質上，當調整窗口大小時會出現問題（在Firefox中除外）。 解決方案可以是在調整大小后重新繪制圖像，這解決了問題：

$(window).resize(function(){
  $('img').hide();
  setTimeout(function(){ $('img').show(); }, 1);
});

Answer 1

您的問題是：

1. 您在圖像上設置了內聯寬度和高度，這將覆蓋該圖像上的寬度和高度的CSS樣式
2. 由於X包裹在<p>標記中，因此X的邊距將圖像向下推。
3. 您根本不需要object-fit 。

解決＃1的簡單方法是從image標簽中刪除內聯寬度和高度，並將其留在樣式表中。

可以通過將X而不是p包裹在div來解決數字2，也可以為其使用偽元素。 我在下面的代碼段中采用了后一種方法。

要解決＃3，只需從樣式表中刪除樣式。 （在Safari中設置此屬性實際上使我感到困惑。）

此代碼段已在Safari 10.1.1中進行了測試。 請注意，默認情況下，占位符圖像的大小如何很大（1000x800），但每個父div只能顯示盡可能大的占位符圖像。

編輯：根據您的評論，讓我們進一步修改它，以便決定圖像的大小，只用包裝紙占據圖像的大小。

因此，在我們的圖像上，為了使其高度達到屏幕的60％，我們可以執行以下操作：

img {
  height: 60vh;
  width: auto;
}

然后，在父級中，我們根本不會指定寬度或高度，但是我們可以display: flex以確保它足夠大以適合其內容。

 body { background: #333; } .pop-up { display: flex; position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: yellow; } .exit { color: black; text-decoration: none; text-align: center; font-size: 300%; display: block; position: absolute; top: -50px; right: -40px; width: 40px; height: 50px; } .image { height: 60vh; width: auto; opacity: 0.7; } 

 <div class="pop-up"> <a href="#" class="exit">X</a> <img class="image" src="http://placehold.it/1000x800" alt="" title=""> </div> 

Answer 2

我將圖像放在P標簽上方，並向.exit-button和.image添加了一些CSS

在這里，您可以調整元素的填充和大小。

 body { background: #333; } .pop-up { position: fixed; height: 60%; width: auto; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); background:yellow; object-fit: contain; } .exit-button { position: absolute; text-align: right; left: 0; right: 0; top: 0; bottom: 0; margin: 0; font-size: 300%; } .image { height: 100%; width: auto; opacity:0.7; } 

 <div class="pop-up"> <img class="image" src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" width="1200" height="630" alt="" title="" /> <p class="exit-button">x</p> </div> 

Answer 3

我復制了您的代碼並對其進行了編輯。 請告訴我這是否是您想要的輸出。

body {
  background: #333;
}
.pop-up {
  position: fixed; 
  height: 60%; 
  width: auto; 
  left:50%; 
  top:50%;
  padding-top: 30px;
  -webkit-transform:translate(-50%,-50%); 
  transform:translate(-50%,-50%);
  background:yellow;
  object-fit: contain;
}    
.exit-button {
  margin-top: -50px;
  text-align: right;
  margin-right: 0;
  font-size: 300%;    
}
.image {
  margin-top: -20px;
  height: 100%; 
  width: auto;
  opacity:0.7;
}
<div class="pop-up">
  <p class="exit-button">x</p>
  <img class="image" src="safari.png" alt="" title="" />
</div>

Answer 4

由於需要根據給定的大小對圖像的對齊方式進行硬編碼，或者處理怪異的卷積，因此我認為這是最好的方法：

創建一個占據整個屏幕的固定覆蓋層，創建一個高度為60％的容器，將其與flexbox居中對齊，然后將圖像粘貼在其中，使其占據整個高度。 長寬比將自動更新（僅在height發生）。

至於按鈕–為其提供絕對位置並將其正確位置設為0，並手動給出父級相對位置（這是必需的）。

<div id="popup">
  <div id="container">
    <a href="">X</a>
    <img src="https://i.redd.it/gelilvo30mgz.jpg">
  </div>
</div>

html,
body {
  height: 100%;
}

#popup {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  position: relative; !important // has to be specified for the children (anchor) to find the bound
  height: 60%;
  background: #333;
}

a {
  right: 0;
  position: absolute;
}

img {
  height: 100%;
}

https://jsfiddle.net/L2nLjjxc/1/

我相信，如果您希望它是動態的，那么卷積最少。