Html 背景图像 CSS 的最大尺寸

Max size for background image CSS

提问by Jonathan.

I have a 70 by 50 px box and I have various images, (SVG files, so no size) I want to keep their aspect ratio, but some images are portrait and some are landscape sized. So I can do:

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

background-size: 70px auto;

and that will work for all the landscape icons. But it will stretch the portrait images and make them taller, so they will still have the correct aspect ratio but the top and bottom will be cut off.

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

is there some kind of background-max-size?

有某种背景最大尺寸吗？

(alternatively, the only reason I'm using background image is because you can center align the image, horizontally and vertically, so the alternative is to find how to vertically align an img element within a li element.)

（或者，我使用背景图像的唯一原因是您可以水平和垂直居中对齐图像，因此另一种方法是找到如何在 li 元素中垂直对齐 img 元素。）

采纳答案by kijin

This is a problem that CSS can't solve on its own. There are JavaScript libraries that will do this job. If you use jQuery, you can find a plugin or roll your own function.

这是 CSS 本身无法解决的问题。有一些 JavaScript 库可以完成这项工作。如果你使用jQuery，你可以找到一个插件或滚动你自己的函数。

Grab the widthand heightof the image, and calculate the ratio (x/y). If the ratio is greater than 70/50 (1.4), set the width to 70px and the height to (70 * x/y). If the ratio is less than 70/50 (1.4), set the height to 50px and the width to (50 * x/y).

抓取图像的宽度和高度，并计算比率（x/y）。如果比率大于 70/50 (1.4)，则将宽度设置为 70px，将高度设置为 (70 * x/y)。如果比率小于 70/50 (1.4)，则将高度设置为 50px，将宽度设置为 (50 * x/y)。

Also see CSS vertical-align

另见CSS 垂直对齐

If you use browsers that don't support vertical-align, you can position the image absolutely at 50%, and set the top margin to (width * -0.5) using JavaScript. That will align the middle of the image with the middle of the parent element, which is the same as vertical center alignment.

如果您使用不支持垂直对齐的浏览器，您可以将图像绝对定位在 50%，并使用 JavaScript 将上边距设置为 (width * -0.5)。这将使图像的中间与父元素的中间对齐，这与垂直居中对齐相同。

回答by kaiser

It's not that hard doing that with CSS

用 CSS 做到这一点并不难

• 1st, please take a look at the Mozilla Specsfor mixed units for background-size.
• 2nd, please consider simply setting background-size: contain;(IE9+, Safari 4.1+, FF 3.0+, Opera 10+) and min/max-width/heightfor the container element.

• 第一，请查看Mozilla Specsfor Mixed Units for background-size.
• 2、请考虑简单的设置background-size: contain;（IE9+、Safari 4.1+、FF 3.0+、Opera 10+）和min/max-width/height容器元素。

回答by richardwestenra

You can absolutely solve this problem without JavaScript using a combination of CSS3 background-sizeand media-queries. e.g.:

使用 CSS3 background-size和 media-queries的组合，你完全可以在没有 JavaScript 的情况下解决这个问题。例如：

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

Note that neither are supported in IE8 or below, so you should include fallbacks for old IE if you still support it.

请注意，IE8 或更低版本均不支持，因此如果您仍然支持旧 IE，则应包括旧 IE 的回退。

回答by Matt Wagner

The answer to this question is a little out of date. As stringman5mentions, neither of the CSS options are supported in IE8 or below. It is also not the best choice to have jQuery handle your background images if it isn't necessary. In order to use an option that includes the fallbacks for older browser, without using JavaScript, you can do something along these lines:

这个问题的答案有点过时了。正如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%;
    }
}

Notice that I'm using max-widthin my media query, this means that background-size: 50%;will be applied UNTIL 1024px. Beyond that point, it does it's default size. In older browsers that don't support media queries or background-size, they will ignore the options and render the maximum size of the background image (default size).

请注意，我max-width在媒体查询中使用，这意味着background-size: 50%;将应用 UNTIL 1024px。除此之外，它是默认大小。在不支持媒体查询或背景尺寸的旧浏览器中，它们将忽略这些选项并呈现背景图像的最大尺寸（默认尺寸）。