使用 height: auto 拉伸图像。这个有什么替代品？

Question

我开发了一个网站，它在最新的 Chrome 版本 75.0.3770.142 中运行良好，而旧版本无法正确呈现，即图像被垂直拉伸。

我用过height:auto。同样的问题出现在 Opera、Safari 和 IE 中。 Mozilla 的最新更新往往可以正常工作。但是旧版本也有同样的问题。

请帮帮我。我将父元素的高度设置为自动（与下面显示的媒体查询相同）并且我使用 flexbox 使图像居中。

@media only screen and (max-width: 414px){
#firstsec{
  padding-top: 50px;
  padding-bottom: 30px;
  height: auto;
  text-align: center;
  background: url(aliali1.png);
  background-size: cover;
  background-repeat: no-repeat;
  } 

  #firstsec h1{
   font-size: 34px;
   padding-bottom: 4px;
  }
  
  #firstsec #headerdesign img{
  padding-top: 30px;
  width:200px;
  height:auto;
  }

<section id="firstsec" class="parallax col-12">
   <div id="headerdesign" class="d-flex justify-content-center col-12">
     <img class="col-12 hello" src="https://i.stack.imgur.com/vnaKJ.png" alt="Cannot Load Image">
   </div>
   <div class="d-flex justify-content-center col-12 animated tada"><h1>“Hello this is Ali!"</br>I'm an Engineer & i like Designing</h1></div>

   <button class="button button4 animated flash"><a href="#secondsec">Check out my work !</a></button>
</section>

Answer 1

更改图片 class 并调用响应式 class，并确保导入所有 Bootstrap classes.

Answer 2

您的图像的宽度为 3980。使用 height:auto，它将以全高显示图像并缩放宽度（固定为 3980 像素）。您是否尝试过使用

.hello{
  width:100%;
}

让你的图片不能大于父容器的视口？

Answer 3

只需将样式表中的 align-items:center 属性添加到现有的 bootstrap class 属性因为默认情况下其 align-items：拉紧。下面的示例；

.justify-content-center{
  align-items: center;
}

<div class="col-lg-4 d-flex justify-content-center">
</div>

Answer 4

img.col-12.hello {
  width: 100%;
}
@media only screen and (max-width: 414px){
  #firstsec{
    padding-top: 50px;
    padding-bottom: 30px;
    text-align: center;
    background: url(aliali1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  } 

  #firstsec h1{
    font-size: 34px;
    padding-bottom: 4px;
  }

  #firstsec #headerdesign img{
    padding-top: 30px;
    width:200px;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section id="firstsec" class="parallax col-12">
   <div id="headerdesign" class="d-flex justify-content-center col-12">
     <img class="col-12 hello" src="https://i.stack.imgur.com/vnaKJ.png" alt="Cannot Load Image">
   </div>
   <div class="d-flex justify-content-center col-12 animated tada"><h1>“Hello this is Ali!"</br>I'm an Engineer & i like Designing</h1></div>

   <button class="button button4 animated flash"><a href="#secondsec">Check out my work !</a></button>
</section>
</body>
</html>

使用 height: auto 拉伸图像。这个有什么替代品？

Images get stretched out using height: auto. What's the substitute for this?

html

css

responsive-design

twitter-bootstrap