如何使图像响应并自动缩小高度答案

【问题标题】：How to make image responsive and auto scale down the height如何使图像响应并自动缩小高度
【发布时间】：2019-07-03 00:45:19
【问题描述】：

我有两个不相等的响应列，右侧较小的是文本，左侧较大的是图像。当我调整浏览器窗口的大小以查看列如何适合页面时，它可以正常工作，直到达到最大宽度 700px 并且列堆叠到彼此上。底栏很好，但最上面的（图像）没有显示完整的图像，只有一个沿着页面宽度的小条。如何让它自动调整高度以显示完整图像？

我尝试将左列的高度设置为自动，但没有成功，它继续只显示一个小条。

.column {
      float: left;
      padding: 10px;
      height: 300px;
  
  
    }

    .left {
      width: 60%;
      background-image: url('http://i.imgur.com/k5gf0zz.jpg');
      background-size: cover;
      background-position: center;

    }

    .right {
      width: 40%;
    }

    /* Clear floats after the columns */
    .row:after {
     content: "";
     display: table;
     clear: both;
    }


    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 700px) {
      .column {
        width: 100%;
      }
     
 
    }

<body>

    <div class="row">
      <div class="column left";>
    
  
      </div>
      <div class="column right" style="background-color:#FDE4EC;">
      <center> <p><font size="8">We Provide Quality Skin Care</font></p>
     <p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p> 
 
     <br> 
 
     <button class="button2"><b>BOOK NOW</b></button> </center>

  
  
       </div>
    </div>


    </body>

任何帮助将不胜感激:)

【问题讨论】：

欢迎来到stackoverflow！为了让人们更容易理解您的问题，您能否提供一个更完整的示例，包括 HTML？理想情况下作为一个 sn-p。
完成，我添加了 html
这似乎受到列高的限制，固定为 300px
请注意，<center> 和 <font> 元素已经过时多年，不应再使用。 html.spec.whatwg.org/dev/obsolete.html#obsolete
如果没有将列高固定为 300 像素，图像在它们甚至相互堆叠之前就是一条细条

标签： html css image responsive

【解决方案1】：

img{
  max-width:100%;
  height:auto;
  display:none;
}
.left {
  width: 60%;
background:url("http://i.imgur.com/k5gf0zz.jpg") no-repeat center;
background-size:cover;
}


.right {
  width: 40%;
  padding: 10px 0px;
}
.row{
  display:flex;
  flex-wrap:wrap;
}

@media screen and (max-width: 700px) {
  .column {
    width: 100%;
  }
  img{
    display:block;
  }
  .left {
  background:none;

  }

}

<div class="row">
  <div class="column left";>
<img src="http://i.imgur.com/k5gf0zz.jpg">

  </div>
  <div class="column right" style="background-color:#FDE4EC;">
  <center> <p><font size="8">We Provide Quality Skin Care</font></p>
 <p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p> 

 <br> 

 <button class="button2"><b>BOOK NOW</b></button> </center>



   </div>
</div>

尝试使用 max-width:100% 和 height:auto 将 img 添加到您的 html 用于小屏幕，使用 background 将 div 添加到大屏幕！

【讨论】：

将img标签添加到您的html并将其作为背景删除！
啊，当它们相互堆叠时有效，但现在当浏览器足够大时它们不会取消堆叠
现在检查编辑帖子这将起作用或检查此 JSFIDDLE jsfiddle.net/2g1nway3/12
谢谢，请问如何使图像宽度减小以与右侧列的高度相匹配，然后它们彼此堆叠，就像它们彼此堆叠之前一样列的高度与图像的宽度相同与右侧的列。 @adel xx
检查已编辑的帖子！这就是你要找的东西！

【解决方案2】：

删除高度并添加最小高度

  .left {
  min-height: auto;
  }

【讨论】：

【解决方案3】：

感谢您的主题，我同意克里斯的观点，如果我们能获得更多信息，那么知道如何提供帮助会更容易。你也可以在你的 html 文件中使用类似的东西，两张不同大小的图片，并为每个页面大小使用一个特定的图片。

<picture id="pic">
<source media="(min-width: 650px)" srcset="image.jpg">
<img src="image2.jpg" alt="same pic bigger size" style="width:auto;">
</picture>

【讨论】：