фоновое изображение слишком увеличено - PullRequest
Новая
       19

фоновое изображение слишком увеличено

0 голосов
/ 25 апреля 2020

мое фоновое изображение на div выглядит слишком увеличенным, и не ясно, теряет ли оно ясность html и стиль, который я пробовал 

<div class="grid-x intro">
        <div class="cell large-12 medium-12 small-12 one">
        </div>
      </div>
        <!-- end of intro -->
styling

.intro{

background-image: url("../images/house4.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
/* height: auto; */
padding-top: 66.64%;
}

Ответы [ 2 ]

1 голос
/ 25 апреля 2020

Здесь все в порядке ... используйте "background-size: 100% auto;" Это потому, что ваше изображение шире, чем высота, и вы использовали background-size: cover;. Чтобы охватить весь фон, поэтому он имеет увеличенную и обрезанную ширину покоя Ваш код в порядке, просто используйте изображение с измененным размером, например, 500px * 333.2px (или около этого соотношения), чтобы показать все изображение внутри 66.64% отступов 

.intro{

background-image: url("https://image.freepik.com/free-vector/geometric-models-gradient-background_23-2148326516.jpg");
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
/* height: auto; */
padding-top: 66.64%;
}
<div class="grid-x intro">
        <div class="cell large-12 medium-12 small-12 one">
        </div>
      </div>
        <!-- end of intro -->
0 голосов
/ 25 апреля 2020

Может быть качество изображения не велико. Или, если вам не нужен полностью покрытый фон, вы можете уменьшить фоновое изображение, выполнив 

background-size: 50%;
...