Как я могу остановить Edge (браузер) растягивая мои изображения? - PullRequest
Новая
       0

Как я могу остановить Edge (браузер) растягивая мои изображения?

1 голос
/ 26 марта 2020

У меня есть тег изображения, похожий на этот 

.flexD {
  display: flex;
  margin: 0 auto;
  width: 90%;
}

.flexP {
  display: flex;
}

.imgInP {
  margin: auto 0;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>

<body>
  <div class="flexD">
    <picture class="flexP">
      <!-- I do have some source tags-->
      <img src="http://placehold.it/100x80"> </picture>
    <p> content content content content content content content content content content content content content content content content content content</p>
  </div>
 <!-- I am using this code--> 
    <div class="flexD">
    <picture class="flexP">
      <!-- I do have some source tags-->
      <img class = "imgInP" src="http://placehold.it/100x80"> </picture>
    <p> content content content content content content content content content content content content content content content content content content</p>
  </div>

</body>

</html>

На Chrome код работает и выглядит как на картинке ниже, но на Edge моя картинка растянута, как указано выше. Означает ли это, что мой запас: auto 0; не работает на Edge? Как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 26 марта 2020

Вы можете использовать свойство подгонки объекта css, оно останавливает растяжение изображений. 

.imgInP{
       object-fit: cover;
 }
0 голосов
/ 26 марта 2020

Если мое понимание вашего требования верно, проверьте это:

, если вы думаете, что image растягивается, вы можете использовать то же изображение, что и content:url и назначить height и width так что он останется неизменным во всех браузерах. 

.flexD {
  display: flex;
  margin: 0 auto;
  width: 90%;
}

.flexP {
  display: flex;
}

.imgInP {
  content: url(http://placekitten.com/301/301);
  width: 100px;
  height: 80px;
}
<body>
  <div class="flexD">
    <picture class="flexP">
      <!-- I do have some source tags-->
      <img class="imgInP">
    </picture>
    <p> content content content content content content content content content content content content content content content content content content</p>
  </div>
  <!-- I am using this code-->
  <div class="flexD">
    <picture class="flexP">
      <!-- I do have some source tags-->
      <img class="imgInP"> </picture>
    <p> content content content content content content content content content content content content content content content content content content</p>
  </div>

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

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

...