如何保持背景图像的宽高比？

我试图看看其他答案，但没有帮助。我的背景是动态的，所以图像的大小会发生变化，所以我需要保持宽高比，以便看到整个图像。这里是我的CSS：如何保持背景图像的宽高比？

.image_submit_div { 
    border: 1px solid #ccc; 
    display: inline-block; 
    padding: 20px 50px; 
    width: 55%; 
    height: 320px; 
    cursor: pointer; 
    background: url('something.jpg'); /* this changes */ 
    margin: 0 0 25px;

}

HTML

<label for="id_image" class="image_submit_div">

在根据图像上的那一刻，很多有时它被切断。我希望图像缩小以便能够完全看到。任何想法？

来源

2017-01-10 Zorgan

我试图他们所说的（背景尺寸：200像素50像素）或背景尺寸：100％100％）;它仍然不起作用 - 仍然切断大部分图片 – Zorgan

使用background-size: cover;以覆盖整个元件，同时保持高宽比：

.image_submit_div { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    padding: 20px 50px; 
 
    width: 55%; 
 
    height: 320px; 
 
    cursor: pointer; 
 
    background: url('http://lorempizza.com/500/500'); 
 
    background-size: cover; 
 
    /* Or use the background shorthand */ 
 
    background: url('http://lorempizza.com/500/500') scroll no-repeat center/cover; 
 
    margin: 0 0 25px; 
 
}

<div class="image_submit_div"></div>

来源

2017-01-10 01:45:51

这很好，谢谢！无论大小，它现在显示完整的图像。 – Zorgan

@Zorgan很高兴我能帮忙:) –

使用background-size:contain;如果要看到整个图像，并将其拉伸到全宽度或高度（取决于图像的宽高比）。

但是，如果你想覆盖整个div的背景图像，不介意修剪图像然后使用background-size:cover;来代替。

.image_submit_div { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    padding: 20px 50px; 
 
    width: 55%; 
 
    height: 320px; 
 
    cursor: pointer; 
 
    background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg'); /* this changes */ 
 
    margin: 0 0 25px; 
 
    background-repeat:no-repeat; 
 
    background-position:center; 
 
    background-size:contain; 
 
}

<label for="id_image" class="image_submit_div">

来源

2017-01-10 01:46:10 ab29007

如何保持背景图像的宽高比？

回答

相关问题