圖像與％不成比例地縮小？

好吧，我只是試圖使用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

圖像與％不成比例地縮小？

回答

相關問題