html – 背景图片CSS的最大大小

概述我有一个70×50像素的盒子，我有各种图像，(SVG文件，所以没有大小)我想保持他们的长宽比，但一些图像是肖像，有些是景观大小。所以我可以做： background-size: 70px auto; 这将适用于所有景观图标。但是它会拉伸肖像图像并使其更高，因此它们仍然具有正确的纵横比，但顶部和底部将被切断。 是否有某种背景最大尺寸？ (或者，我使用背景图像的唯一原因是因为您可以对齐水平和垂直的图像 我有一个70×50像素的盒子，我有各种图像，(SVG文件，所以没有大小)我想保持他们的长宽比，但一些图像是肖像，有些是景观大小。所以我可以做：

background-size: 70px auto;

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

是否有某种背景最大尺寸？

(或者，我使用背景图像的唯一原因是因为您可以对齐水平和垂直的图像，因此替代方法是找到如何垂直对齐li元素中的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％，并使用JavaScript将顶部边距设置为(宽度* -0.5)。这将使图像的中间与父元素的中间对齐，这与垂直中心对齐相同。

总结

以上是内存溢出为你收集整理的html – 背景图片CSS的最大大小全部内容，希望文章能够帮你解决html – 背景图片CSS的最大大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。