如何在高度大於寬度時將圖像修復爲div？

在Facebook上，當我們發佈任何尺寸的圖片時，它會在時間軸上完美呈現。他們如何做到這一點？如何在高度大於寬度時將圖像修復爲div？

我試過了。

將圖像設置爲div的背景。
CSS - width：100％;高度：自動;

兩者都沒有工作，所有的堆棧溢出沒有這個選項，最後決定添加這個。

2017-07-08 ARM khan

旁白從所有的答案，臉譜也將通過運行在服務器端腳本的所有上傳內容，這將做調整大小和壓縮。他們可能有自己的內部代碼做這個，但你可以使用imagemagick做同樣的事情，包括調整裁剪上傳，以便始終保持相同的寬高比（至少對於縮略圖）http://php.net /manual/en/book.imagick.php – Doug

如果你的父母div有固定尺寸您可以使用CSS來規模的圖像，同時保持縱橫比兩個景觀和肖像照片。

圖像將始終適合div內。

.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    text-align: center; 
 
    background: red; 
 
} 
 

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

<h1>Landscape</h1> 
 
<div class="container"> 
 
    <img src="https://unsplash.it/1600/800"> 
 
</div> 
 
<h1>Portrait</h1> 
 
<div class="container blue"> 
 
    <img src="https://unsplash.it/800/1600"> 
 
</div>

來源

2017-07-08 14:14:57

這個答案有點好，不是期望的！ –

對於img，我們必須添加邊距：如果圖像小於div，自動將圖像自動居中。 –

在Facebook，他們不顯示圖像作爲背景。圖像顯示在那裏使用img標籤。如果您觀察Facebook圖片的高度可能不同，但寬度始終相同。嘗試張貼非常長的圖像，你會明白的事情。

解決方案：

<div> 
    <img src="anysource"> 
</div> 

<style> 
    div{width: 480px;} 
    div img{width: 100%; height: auto} 
</style>

來源

2017-07-08 13:52:55

，我認爲你所要求的縮放technique.You應嘗試將圖像，並將它重新定標，即改變它的高度和寬度使用JavaScript DOM或CSS和再上傳到頁面。

您的第一個解決方案無法正常工作，因爲圖像沒有顯示爲背景，而是顯示爲。

來源

2017-07-08 13:55:53

除了所有的答案，陳述實際<img>標籤上使用的CSS。

Facebook還將通過服務器端腳本運行所有上傳，該腳本將執行調整大小和壓縮。

他們可能有自己的內部代碼，但是您可以使用Imagemagick做同樣的事情，包括調整大小和剪裁上傳，以便始終保持相同的寬高比（至少對於縮略圖）。

一些例子可以在這裏找到：http://php.net/manual/en/book.imagick.php

對於同時利用定位參數你可以看看的背景圖片屬性純CSS選項。

這是從w3cschools中摘錄的一個片段。

div {      
Width:100px; 
Height:100px; 
background-image:url('smiley.gif'); 
background-repeat:no-repeat; 
background-position:50% 50%; 
}

https://www.w3schools.com/cssref/pr_background-position.asp

來源

2017-07-08 14:05:04 Doug

如何在高度大於寬度時將圖像修復爲div？

回答

相關問題