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

【问题标题】：Images get stretched out using height: auto. What's the substitute for this?使用 height: auto 拉伸图像。这个有什么替代品？
【发布时间】：2019-07-16 05:39:57
【问题描述】：

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

我用过height:auto。同样的问题出现在 Opera、Safari 和 IE 中。 Mozilla 的最新更新往往运行良好。但是旧版本也有同样的问题。

请帮帮我。我将父元素的高度设置为 auto（与下面显示的媒体查询相同），并且我使用了 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>

【问题讨论】：

如果您向我们提供响应查看图像的 html 代码会更好
我已经添加了。谢谢！
您的图片路径不正确，请添加实时图片路径，以便我们为您提供帮助。
img 可能是一个弹性元素，所以它的 align-items 属性默认设置为拉伸。尝试覆盖此属性align-items

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

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

.hello{
  width:100%;
}

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

【讨论】：

感谢您的宝贵建议。我已经找到了解决方案。查看我的答案！

【解决方案2】：

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>

【讨论】：

【解决方案3】：

只需将样式表中的 align-items:center 属性添加到现有的引导类属性中，因为默认情况下它的 align-items:stretch。下面的例子;

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

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

【讨论】：

【解决方案4】：

更改您的图像类并调用响应类，并确保导入所有 Bootstrap 类。

【讨论】：

我认为这提供了问题的答案。