CSS: Как подогнать ширину фона div - PullRequest
Новая
       0

CSS: Как подогнать ширину фона div

0 голосов
/ 06 мая 2020

Извините, если этот вопрос дублируется, я не могу его найти. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      html, body{
        margin: 0px;
        padding: 0px;
      }
      body {

      }
      .image {
        overflow: hidden;
        background-size:cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('https://i.ibb.co/svvK5z4/about-background.jpg');
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="image"></div>
  </body>
</html>

Я хочу, чтобы ширина этого фона идеально подходила к экрану и регулировала высоту в соответствии с соотношением (высота этого изображения намного больше ширины, поэтому появится горизонтальная полоса прокрутки. )

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



Извините за плохое объяснение. Я отвечу как можно скорее, если у вас возникнут вопросы.

Ответы [ 2 ]

1 голос
/ 07 мая 2020

Изображение неправильной формы, поэтому на прямоугольном angular экране оно будет выглядеть деформированным. Я вырезал прямоугольник angular. Это то, что вы хотите? 

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

.image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  background-image: url('https://i.imgur.com/9hXcf0G.jpg');
  display: block;
  width: 100%;
  height: 100%;
}

p:first-of-type {
  margin-top: 0
}
<div class="image">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor
    interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum.
    Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum.
  </p>

  <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur
    nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex.
  </p>



  <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet.
    Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus
    accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor
    interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum.
    Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum.
  </p>

  <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur
    nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex.
  </p>



  <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet.
    Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus
    accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor
    interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum.
    Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum.
  </p>

  <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur
    nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex.
  </p>



  <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet.
    Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus
    accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor
    interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum.
    Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum.
  </p>

  <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur
    nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex.
  </p>



  <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet.
    Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus
    accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor
    interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum.
    Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum.
  </p>

  <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur
    nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex.
  </p>



  <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet.
    Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus
    accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor
    interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum.
    Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum.
  </p>

  <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur
    nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex.
  </p>



  <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet.
    Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus
    accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor
    interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum.
    Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum.
  </p>

  <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur
    nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex.
  </p>



  <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet.
    Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus
    accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p>


</div>
0 голосов
/ 06 мая 2020

Как насчет того, чтобы попробовать это: 

.image {

  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

Конечно, не забудьте изменить URL-адрес в соответствии с вашими потребностями. Это также должно соответствовать полноэкранному режиму для любого браузера или любого размера экрана. Подробнее об этом можно прочитать здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...