图像不与 % 成比例缩小？答案

【问题标题】：Images not shrinking proportionally with %?图像不与 % 成比例缩小？
【发布时间】：2017-12-21 11:24:03
【问题描述】：

好的，所以我只是尝试使用width:10%; 减小.jpg 中社交图标的大小。它不是按比例缩小，而是粘糊糊的。 我使用的社交图标图片尺寸为 250 像素 x 250 像素 图像需要相对于屏幕尺寸增长。有什么想法吗？

HTML

            <div class="social-footer">
            <h3 class="connect-us-title">Connect With Us</h3>
            <div class="social-flex">
                <img class="social-icon" src="img/desktop/images/twitter.jpg">                   
                <img class="social-icon" src="img/desktop/images/insta.jpg">                     
                <img class="social-icon" src="img/desktop/images/fb.jpg">                       
            </div>               
        </div>

CSS

    /* SOCIAL */
.social-footer {
    margin: 2rem 0;
}
.social-icon {      
    max-width: 100%;
    width: 10%;
    height: auto;
 }

.social-flex {
    display: flex;
    justify-content: space-around;
  }

【问题讨论】：

标签： html css responsive-design image-scaling

【解决方案1】：

将 height 设置为 10%，因为您希望它与 width 成比例

【讨论】：

【解决方案2】：

尝试删除 max-width: 100%;

或转动最大宽度：10%

【讨论】：

【解决方案3】：

默认align-items是stretch，这会导致flex子stretch填充父级的高度。要禁用它，只需为 align-items 使用另一个值

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

/* SOCIAL */
.social-footer {
  margin: 2rem 0;
}
.social-icon {
  max-width: 100%;
  width: 10%;
  height: auto;
}

.social-flex {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

<div class="social-footer">
  <h3 class="connect-us-title">Connect With Us</h3>
  <div class="social-flex">
    <img class="social-icon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
    <img class="social-icon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
    <img class="social-icon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
</div>

【讨论】：