图像不按比例缩小 %？

Question

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

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;
  }

Answer 1

默认的align-items是stretch，这会导致flex childrenstretch填满parent的高度。要禁用它，只需为 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>

Answer 2

尝试删除最大宽度：100%；

或转max-width: 10%

Answer 3

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

成正比

图像不按比例缩小 %？

Images not shrinking proportionally with %?

html

css

image-scaling

responsive-design