Изображение для правильного размещения внутри div - PullRequest
Новая
       20

Изображение для правильного размещения внутри div

0 голосов
/ 01 августа 2020

Я пытаюсь сделать так, чтобы изображение идеально вписалось в мой div, но многие из них отсутствуют. Есть способ сделать это правильно. Спасибо

Вот как у меня сейчас: 

.add {
background-image: url(https://www.capebretonstartpage.com/images/SPCA-Header-Images-Blue.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
height: 100%;   
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 19px;
font-weight: 300;
padding: 40px;
text-align: center;
}
<div class="add">
text
</div>

1 Ответ

0 голосов
/ 01 августа 2020

Если вы хотите, чтобы изображение заполняло весь div (с частями, возможно, обрезанными), используйте background-size: cover

Если вы хотите целиком изображение должно отображаться во всех возможных пропорциях div (при этом части div не заполняются фоновым изображением), используйте background-size: contain;.

Если вы хотите, чтобы все div было заполнено изображение и не заботитесь об искажении изображения из-за неправильного отношения высоты / ширины, вы можете использовать background-size: 100% 100%; (что обычно плохая идея для фотографий и работает только для абстрактной графики)

Если если вы хотите, чтобы все изображение отображалось без обрезки и без пустых мест в DIV, вам необходимо указать параметры DIV width и height, которые отражают исходное соотношение высоты / ширины изображения.

...