背景图像的最大尺寸CSS

问题描述：

我有一个70 x 50像素的盒子，我有各种图像（SVG文件，所以没有大小）我想保持它们的宽高比，但是一些图像是纵向的，一些是横向大小的。所以我可以这样做：背景图像的最大尺寸CSS

background-size: 70px auto;

并且这将适用于所有的景观图标。但它会拉伸肖像图像并使它们更高，因此它们仍将具有正确的宽高比，但顶部和底部将被切断。

是否有某种background-max-size？

（或者，我使用的背景图片的唯一原因是因为你可以中心对齐的图像，水平和垂直，所以另一种方法是找到如何垂直对齐锂元素中的img元素。）

答

这是一个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。这将使图像的中间与父元素的中间对齐，这与垂直中心对齐相同。

呃，为什么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。

'背景大小：包含'做了我的用例的伎俩。 – 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回退，如果你仍然支持它。

答

这个问题的答案有点过时了。正如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。除此之外，它是默认大小。在不支持媒体查询或背景大小的较旧浏览器中，它们将忽略这些选项并呈现背景图像的最大大小（默认大小）。

背景图像的最大尺寸CSS

相关推荐