用於圖像大小調整的CSS

我對需要編寫的某些CSS有以下要求。我有一張需要適合某個區域的圖像，並且其大小需要保持成比例。用於圖像大小調整的CSS

我希望它具有25px寬度和25px高度的最大尺寸。但是，如果寬度大於25像素或高度爲25像素，則需要調整大小以適應這些尺寸的比例。

現在，我有以下幾點：

.imageResizeAccountInfo 
{ 
    height: auto; 
    width: auto; 
    max-width: 25px; 
    overflow: hidden; 
}

這是正確的方式來實現我在尋找什麼呢？

來源

2013-12-13 user489041

使用vor max-width和height設置爲auto的絕對值對我來說似乎很好。順便說一句：檢查出_object-fit_屬性，它對圖像做了什麼，我們已經可以用背景了。那裏還有一個polyfill。 – kleinfreund

您可以在CSS中使用：

background-image: url("path/image.jpg") 
background-size: contain;

來源

2013-12-13 19:48:52

但是，我不想讓它佔用容器的所有空間？ – user489041

您可以使用background-size：25px auto;如果你想讓你的bg在50px框中爲25px，高度將自動調整。 –

可能我建議使用：

background-image: url('yourimage.jpg');

background-size: contain;

其中將包含照片，這是家長的高度&寬度。

來源

2013-12-13 19:49:20

但是如果容器是50px乘50px。我只想要圖像爲25像素×25像素。這仍然有效嗎？ – user489041

您需要製作背景圖片div 25px x 25px。 –

這將始終爲您提供25像素寬的圖像，其高度與所做的任何調整大小成正比。如果您想以編程方式確定高度或寬度是否需要調整大小，可以使用javascript來完成。

來源

2013-12-13 19:54:41

使用this guide來保持寬高比。我一直使用它來拍攝照片和視頻（使youtube視頻非常容易調整大小）。

注意：這隻會在您事先知道圖像的寬高比，或者添加一些邏輯來確定它時才起作用。如果你想要處理任何未知尺寸的圖像，這是行不通的。

類似HTML

<div class='imageResizeAccountInfo'> 
    <div class='content'>Aspect ratio of 1:1</div> 
</div>

添加這個CSS

.imageResizeAccountInfo{ 
    position: relative; 
    width: 100%; 
} 
.imageResizeAccountInfo:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /* initial ratio of 1:1*/ 
} 
.content{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}

而對於定製

/* Other ratios */ 
.ratio2_1:before{ 
    padding-top: 50%; 
} 
.ratio1_2:before{ 
    padding-top: 200%; 
} 
.ratio4_3:before{ 
    padding-top: 75%; 
} 
.ratio16_9:before{ 
    padding-top: 56.25%; 
}

來源

2013-12-13 20:10:49

一些額外的CSS如果你只需要在25x25px來調整最多圖像和保持寬高比你只需要設置

img { 
    max-width: 25px; 
    max-height: 25px; 
}

http://jsfiddle.net/3rfXa/

有三種情況，一個平方的圖像將調整爲25×25，一個人像圖像將被調整到somethingx25和景觀的圖像將被調整到25xsomething（帶的東西小於或等於25）

也許我真的不明白的問題，導致所有其他的答案似乎是爲resize

注意，最大寬度和最大高度不支持較舊版本的IE

太複雜

來源

2013-12-13 20:42:33 arieljuod

用於圖像大小調整的CSS

回答

相關問題