时间戳

首页 > 解决方案 > 使用 height: auto 拉伸图像。这个有什么替代品？

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

问题描述

我开发了一个网站，该网站在最新的 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>

标头设计1

标签： htmlcsstwitter-bootstrapresponsive-design

解决方案

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

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

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

推荐阅读