好吧,我只是试图使用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;
}