#html #css #background-image #centering
#HTML #css #фоновое изображение #центрирование
Вопрос:
У меня ситуация, когда я хочу использовать фоновое изображение, а не тег изображения. Здесь важно изменение размера изображения в соответствии с размером экрана… первый пример — это то, что я хочу… изображение изменяется, но останавливается, когда высота уменьшается до 300 пикселей. Затем, если размер экрана становится действительно узким, изображение остается центрированным, а концы обрезаются для обоих размеров. Этого можно легко достичь с помощью object-fit:cover
Второй div использует фоновое изображение и почти работает, но когда экран становится узким, я не могу выровнять изображение по центру. обратите внимание, что изображение просто обрезается до нужного размера.
.myimgtag {
width:100%;
height:auto;
min-height:300px;
object-fit:cover}
.mybackgroundimg {
background-image:url('https://www.panotools.org/dersch/StBp.JPG');
background-size:cover;
background-repeat:no-repeat;
min-height:300px;
max-height: 2000px;
max-width: 2000px;
}
.mybackgroundimg:before {
content: "";
display: block;
padding-bottom: 50%;
} <div>
<img class='myimgtag' src='https://www.panotools.org/dersch/StBp.JPG'>
</div>
<br><br>
<div class='mybackgroundimg'></div> Ответ №1:
На втором изображении вы пробовали background-position?
.myimgtag {
width:100%;
height:auto;
min-height:300px;
object-fit:cover}
.mybackgroundimg {
background-image:url('https://www.panotools.org/dersch/StBp.JPG');
background-position: center;
background-size:cover;
background-repeat:no-repeat;
min-height:300px;
max-height: 2000px;
max-width: 2000px;
}
.mybackgroundimg:before {
content: "";
display: block;
padding-bottom: 50%;
} <div>
<img class='myimgtag' src='https://www.panotools.org/dersch/StBp.JPG'>
</div>
<br><br>
<div class='mybackgroundimg'></div>