將圖像包裝到div中，但保持長寬比

圖像流出div，我期望它適合在包裝內，因爲我已將寬度設置爲div包裝。圖像的尺寸可能不一樣，所以我沒有將img設置爲某個固定寬度以保持寬高比。將圖像包裝到div中，但保持長寬比

profile-pic-wrap { 
    width:200px; 
    height:200px; 
    border: 5px solid black; 
} 
img { 
    width:100%; 
}

來源

2014-01-21 user3189052

你離開.你的類。但事件與（http://fiddle.jshell.net/293mW/1/）圖像將彈出該div。您可以將overflow:hidden;添加到div，但這會裁剪圖像（http://fiddle.jshell.net/pzDVd/）。

您可能希望使用背景圖像，而不是使用background-size: cover;或background-size: contain;規則。另請參見https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

jsFiddle example（或http://fiddle.jshell.net/Fhnk8/）

.profile-pic-wrap { 
    width:200px; 
    height:200px; 
    border: 5px solid black; 
    background-image: url(http://naijaparrot.com/wp-content/uploads/2013/10/mark-zuckerberg-le-fondateur-de-facebook.jpg); 
    background-size: cover; 
}

來源

2014-01-21 02:17:25 j08691

利用溢出隱藏似乎做的伎倆，結果是使用背景IMG相同..爲什麼呢？ – user3189052

我假設你指的是'background-size：cover;'（不包含），這只是因爲封面會縮放以適合「，同時確保其尺寸大於或等於背景的相應尺寸定位區域「。背景圖片不能戳出它們的容器。 – j08691

下面是正確的代碼來解決問題。這將調整任何圖像到容器中，同時保持正確的寬高比。

此外，您應該儘量避免使用background-size: cover，因爲舊版瀏覽器的瀏覽器支持較差。

http://fiddle.jshell.net/293mW/4/

.profile-pic-wrap { 
    width:200px; 
    height:200px; 
    border: 5px solid black; 
} 
img { 
    width:100%; 
    max-width: 100% 
    height: auto; 
}

來源

2014-01-21 02:40:30

將圖像包裝到div中，但保持長寬比

回答

相關問題