Question

好的，我只是想使用.jpg来减少width:10%;中社交图标的大小。而不是按比例缩小它的软弱。 我使用的图片尺寸为社交图标的250像素×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;
  }

Answer 1

默认align-items为stretch，这会导致弹性儿童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>

Answer 2

尝试删除max-width：100％;

或转最大宽度：10％

Answer 3

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

成比例

图像不会与％按比例缩小？

3 个答案: