Центрирование изображения с background-image: URL против тега изображения - PullRequest
Новая
       32

Центрирование изображения с background-image: URL против тега изображения

0 голосов
/ 22 апреля 2019

У меня есть ситуация, когда я хочу использовать фоновое изображение, а не тег изображения.Изменение размера изображения для размера экрана здесь важно ... первый пример - это то, что я хочу ... изменение размера изображения, но оно останавливается, когда высота уменьшается до 300 пикселей.Затем, если размер экрана становится действительно узким, изображение остается в центре и концы обрезаются для обоих размеров.Это может быть легко достигнуто с помощью object-fit:cover

Второе деление использует фоновое изображение и почти работает, но когда экран становится узким, я не могу центрировать изображение.обратите внимание, что изображение обрезается до нужного размера. 

.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 Ответ

1 голос
/ 22 апреля 2019

На втором изображении вы пробовали 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>
...