背景圖像的最大尺寸CSS

我有一個70 x 50像素的盒子，我有各種圖像（SVG文件，所以沒有大小）我想保持它們的寬高比，但是一些圖像是縱向的，一些是橫向大小的。所以我可以這樣做：背景圖像的最大尺寸CSS

background-size: 70px auto;

並且這將適用於所有的景觀圖標。但它會拉伸肖像圖像並使它們更高，因此它們仍將具有正確的寬高比，但頂部和底部將被切斷。

是否有某種background-max-size？

（或者，我使用的背景圖片的唯一原因是因爲你可以中心對齊的圖像，水平和垂直，所以另一種方法是找到如何垂直對齊鋰元素中的img元素。）

來源

2010-10-29 Jonathan.

這是一個CSS自己無法解決的問題。有JavaScript庫可以完成這項工作。如果你使用jQuery，你可以找到一個插件或推出你自己的功能。

抓住圖像的width和height，並計算比率（x/y）。如果比率大於70/50（1.4），則將寬度設置爲70px，高度設置爲（70 * x/y）。如果比率小於70/50（1.4），請將高度設置爲50px，寬度設置爲（50 * x/y）。

另見CSS vertical-align

如果您使用的是不支持垂直對齊的瀏覽器，你完全可以在50％的圖像的位置，並設置上邊距，以（寬* -0.5）使用JavaScript。這將使圖像的中間與父元素的中間對齊，這與垂直中心對齊相同。

來源

2010-10-29 21:47:31 kijin

呃，爲什麼CSS不能做中心垂直對齊，就像水平居中。 CSS可以更容易，明智的顯而易見！ – 2010-10-29 22:07:42

@Jonathan CSS可以做垂直對齊就好，只有微軟像往常一樣搞砸了。不要責怪CSS，責怪M $ :) – kijin 2010-10-29 22:51:04

微軟？他們怎麼處理它？如果我出垂直對齊：在imgs父母的中心，它不會垂直對齊 – 2010-10-30 07:52:59

它並不難這樣做與CSS

1，請看一看the Mozilla Specs混合單位background-size。
第二，請考慮簡單地爲容器元素設置background-size: contain;（IE9 +，Safari 4.1 +，FF 3.0+，Opera 10+）和min/max-width/height。

來源

2012-03-15 15:43:25 kaiser

'背景大小：包含'做了我的用例的伎倆。 – joshuarh 2012-11-30 07:53:30

「background-size：contains;」如果圖像需要一定的高度，則不能解決問題。容器元素的「最小高度」不會使圖像覆蓋高度。 – 2017-03-12 18:20:02

我的'background-size：100％'爲我的用例，然後我告訴我應用'background-image'的元素在我最大的'breakpoint'處有一個'max-size'。奇蹟般有效。 – 2017-03-30 21:13:40

如果不使用CSS3 background-size和媒體查詢組合的JavaScript，您絕對可以解決此問題。例如： -

@media only screen and (max-width: 1000px) { 
    #element { 
     background-size: contain; 
    } 
}

注意，無論是支持IE8或以下，所以你應該包括對舊IE回退，如果你仍然支持它。

來源

2013-10-14 13:24:01 richardwestenra

這個問題的答案有點過時了。正如stringman5提到的那樣，IE8或以下版本都不支持CSS選項。如果沒有必要讓jQuery處理背景圖片也不是最好的選擇。爲了使用包括舊版瀏覽器的回退，無需使用JavaScript的選項，你可以做這些方針的東西：

#myElement { 
    background: #FFFFFF url('mybackground.jpg') no-repeat right top; 
} 

@media only screen and (max-width: 1024px){ 
    #myElement { 
     background-size: 50%; 
    } 
}

注意到，我在我的媒體查詢使用max-width，這意味着background-size: 50%;會直到1024px。除此之外，它是默認大小。在不支持媒體查詢或背景大小的較舊瀏覽器中，它們將忽略這些選項並呈現背景圖像的最大大小（默認大小）。

來源

2014-06-05 15:35:12

背景圖像的最大尺寸CSS

回答

相關問題