图像与％不成比例地缩小？

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

来源

2017-07-17 Shaz

默认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>

来源

2017-07-17 03:22:51

尝试移除最大宽度：100％;

或关闭最大宽度：10％

来源

2017-07-17 03:23:52

，因为你希望它是成正比的width

设置你的 height至10％

来源

2017-07-17 03:29:31

图像与％不成比例地缩小？

回答

相关问题