文章/答案/技术大牛

发布

社区首页 >问答首页 >图像不按%按比例缩小？

问图像不按%按比例缩小？
EN

Stack Overflow用户

提问于 2017-07-17 03:20:39

回答 3查看 844关注 0票数 1

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

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

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-07-17 03:22:51

默认的align-items是stretch，这将导致flex子级填充父级的高度。要禁用它，只需为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>

票数 2

Stack Overflow用户

发布于 2017-07-17 03:23:52

试着去除最大宽度: 100%；

或最大宽度: 10%

票数 0

Stack Overflow用户

发布于 2017-07-17 03:29:31

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45135497

复制

相似问题

问图像不按%按比例缩小？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像不按%按比例缩小？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像不按%按比例缩小？
EN