我基本上有一組未知大小的圖像。有些可能有寬度>高度，反之亦然。調整大小和長寬比未知大小的圖像
我需要顯示這些項目縮放以適合300x300框。其中一些圖像小於300x300，需要擴大規模，有些規模較大，需要縮小比例。
所以基本上，如果我有一個形象，是100×200，我需要它在150x300顯示，如果我有一個形象，是800x400需要顯示爲300x150。
即一個尺寸需要適合框和其他尺寸 需要調整爲長寬比。
由於這是一個用戶在數據庫中選擇的對象，我最初嘗試在JavaScript中這樣做，但我很掙扎。我很好奇，如果有純CSS的方式來做到這一點。
你好，你可以使用下面的代碼只使用CSS和JavaScript
這將保持你的縱橫比，也
<style type="text/css">
.image_box{
width: 300px;
height: 300px;
background: #FF0;
}
</style>
<div class="image_box">
<img src="1.jpg" id="imageid">
</div>
<script type="text/javascript">
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
//alert(width);
//alert(height);
if(width>height){
img.style.width = '300px';
}else{
img.style.height = '300px';
}
</script>
有2種方式，你可以用純CSS做到這一點。
可以將圖像設定爲div的背景，然後設置div的高度成所需的尺寸。
<div class="background"></div>
.background {
background-image: url("SOMEURL");
background-size: cover;
background-position: center center;
width: 150px;
height: 300px;
}
您可以設置背景大小來覆蓋以縮放背景圖像，使其佔用可用的寬度或高度。
此方法建議由於更好的瀏覽器支持（IE 9+）
演示：http://codepen.io/aaronvanston/pen/NbrYWM
可以使用正常的圖像而不是
<img src="SOMEURL" class="fit-image" >
.fit-image {
width: 150px;
height: 300px;
object-fit: cover;
}
演示：http://codepen.io/aaronvanston/pen/gLMeMX
這與背景圖像做同樣的事情，但它使用圖像元素。但是，此方法不受支持。（爲IE不支持）http://caniuse.com/#feat=object-fit
不支持在邊緣 - 當然OP會希望「包含」寬度和高度300px，而不是覆蓋寬度150px！ –
正確:)隨着封面/包含我不確定OP是否希望裁剪或僅包含圖像並將其限制在邊框。 –
方法一用簡單的CSS（這樣的小圖片不會擴展到容器）
<div style="width:300px; height:300px; border:2px solid black;">
<img src="images/p1.jpg" style="max-width:300px; max-height:300px;" />
</div>
更新方法2：（此使用背景圖片和作品也爲小圖片，這是確定的現代瀏覽器IE9，包括+）
<html>
<head>
<style type="text/css">
.divImg {
width:300px; height:300px; border:2px solid black;
background-repeat: no-repeat;
background-size: contain; /* IE9+ compatible */
}
</style>
</head>
<body>
<div class="divImg" style="background-image:url(p1.jpg)">
</div>
</body>
</html>
使用maxes一個100x200圖像仍然是100x200 – insertusernamehere
@ThomasAnthony是的，你是對的，我已經更新了我的答案以支持小圖片 –
的解決方案是兩個主要特徵的組合;
background-size:contain屬性值。下面是一個示例，其中我使用了100x200圖像和800 x 400圖像。 http://codepen.io/partypete25/pen/ZBOxKg/
不指定寬度和高度（使用透明圖像來保持正確的寬高比）的好處是您可以在響應式構建中使用此實現。
我會做這樣的事情。我希望這個解決方案有幫助
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.img-cont {
border: solid 1px red;
width: 300px; /* reference border */
height: 300px;
}
</style>
</head>
<body>
<!-- images with different dimensions -->
<div class="img-cont"><img src="https://dummyimage.com/800x400/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/400x800/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/100x200/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/200x100/000/fff" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
// max image width/height that we want
var maxWidthAllowed = 300,
maxHeightAllowed = 300;
function loadImg(imgObj) {
$('.img-cont img').one("load", function() {
var imgWidth = $(this).get(0).naturalWidth,
imgHeight = $(this).get(0).naturalHeight,
coeff = imgWidth/imgHeight; // get image proportion
if(parseFloat(coeff) > 1) {
// wide image
// resize proportionately
$(this).css({
'max-width': maxWidthAllowed,
'width': '100%',
'height' : 'auto'
});
} else {
// thin image
// resize proportionately
$(this).css({
'max-height': maxHeightAllowed,
'height': '100%',
'width' : 'auto'
});
}
}).each(function() {
if(this.complete) $(this).load();
});
}
loadImg();
})(jQuery);
</script>
</body>
</html>
所以你需要一個純粹的CSS解決方案或JavaScript也可以接受？ –
爲什麼不只設置高度或寬度？而不是設置高度和寬度。 –
而不是圖片，將它設置爲div的背景，background-size：cover; background-position：center;應該適合放在背景中的圖像放在中心 – santosh