Как масштабировать изображение внутри контейнера - PullRequest
0 голосов
/ 27 мая 2019

Эй, ребята, я столкнулся с этой проблемой, когда я создал контейнерную коробку, но изображение, которое я вставил внутрь, либо растягивается, либо некоторые части изображения не отображаются

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

<!DOCTYPE html>
<html>

  <head>
    <title>Example-1</title>
    <link rel="stylesheet" href="Example.css" type="text/css">
  </head>

  <body>
    <div class="img-box">
      <div class="text">
      </div>
    </div>
  </body>

</html>
.img-box {
  width: 1200px;
  height: 600px;
  padding: 20px;
  margin: 100px auto;
  box-shadow: 0px 0px 10px grey;
  background: url(about.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Я ожидал, что изображение будет масштабироваться, когда я использовал подгонку объектов, но это не так.Есть идеи?

Ответы [ 2 ]

0 голосов
/ 27 мая 2019

используйте ширину: 100%, чтобы предотвратить растягивание изображений, и приведенный ниже код может оказаться во втором случае.

.img-box {
  width: 100%;
  height: 600px;
  padding: 20px;
  margin: 100px auto;
  box-shadow: 0px 0px 10px grey;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Flag_of_Pakistan.svg/800px-Flag_of_Pakistan.svg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.text{
  height:100%
}
0 голосов
/ 27 мая 2019

Если вы не хотите обрезать фоновое изображение, используйте background-size: contain вместо background-size: cover

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