只能水平縮放響應圖像

Question

我在網站上工作，現在我想要一個圖像（img標籤）只能水平縮放。所以它總是需要充分的高度。當你調整屏幕時，它應該停留在中心並裁剪左右兩側。沒有「拉伸」圖像。

舉一個例子（這是大左圖像中的滑塊）：

http://reddle.nl/frankendael/beers/t-i-t-s/

我想成爲一個能夠隨時查看完整的啤酒瓶。

Answer 1

img { 
    height: auto; 
    max-width: 100%; 
} 

Answer 2

試試這個。

.vc_inner { 
    height: 100%; 
} 
.attachment-full { 
    height: 100%; 
    width: 100%; 
} 

如果你想適合所有屏幕，使用最小高度或最大高度

Answer 3

您必須嵌入圖像與width:100%和oveflow:hidden一個div。您的圖片必須包含其大小，並且div必須至少具有與圖片相同的高度

Answer 4

有幾種方法可以實現此目的。因爲你沒有給所有可能的細節，或任何代碼，我只是猜測，這可能完成你想要的：

body { 
 
    margin: 0; padding: 0; 
 
} 
 

 
.container { 
 
    width: 40%; 
 
    height: 100vh; 
 
    
 
    overflow: hidden; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    
 
    /* just to show the container for testing */ 
 
    box-shadow: 2px 2px black; 
 
} 
 

 
img { 
 
    height: 100%; 
 
}

<div class='container'> 
 
    <img src='https://source.unsplash.com/random/800x1000/daily'> 
 
</div>

我選擇這樣做使用Flex盒，通過給容器全高，顯示其內容（圖像）中心/中心，並給圖像100％的高度。當盒子太小時，會突出兩側，並在盒子太大時增加空白區域。您可以看到一個真人版at this CodePen。還有其他方法可以做到這一點，但這個方法相當乾淨並且得到很好的支持。

祝你好運！如果這不是你想要的，請更新你的問題更清楚。