CSS：背景大小的封面，但不允许图像超过自己的宽度

Question

如果我使用background-size: cover;作为背景图像并且该图像宽度仅为800像素，但视口宽度为1500像素，我该如何才能使图像不超过自己的宽度？ （我不希望它伸展得比原始尺寸大。）

header.hero { 
    position: relative;
    clear: both;
    overflow: hidden;
    min-height: 390px;
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size:cover;
}

Answer 1

添加此css：

max-width: 800px;

Answer 2

  

但是每次我使用不同的时候我都不想添加CSS定义   图像...

所以你可以尝试添加CSS属性：

width: auto; - 您的图片宽度将缩放为img height

max-width: 100%; - 您的图片永远不会比容器包装

更宽