10
Tôi đang xây dựng trang web danh mục đầu tư.Tại sao hình ảnh SVG của tôi không sử dụng thuộc tính CSS "width"?
HTML Mã
<div id = "hero">
<div id = "social">
<img src = "facebook.svg">
<img src = "linkedin.svg">
<img src = "instagram.svg">
</div>
</div>
mã CSS (sử dụng SASS)
#hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
#social {
width: 50%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
img {
width: 2em;
}
}
}
Vấn đề là tôi không thể thay đổi kích thước SVGs bằng cách sử dụng CSS width tài sản. Dưới đây là những gì tôi có được trong các trường hợp khác nhau:
img { width: 2em; }
img { width: 3em; }
img { width: em; }
Xin lưu ý cách biểu tượng thu gọn về phía giữa của số hero div.
Thay vào đó, nếu tôi sử dụng CSS height tài sản:
img { height: 2em; }
img { height: 3em; }
img { height: 4em; }
Hành vi này là những gì tôi cần, nhưng tôi không chắc đây là cách phù hợp. Tại sao điều này xảy ra? Bạn có biết cách thay đổi kích thước hình ảnh SVG tốt hơn (đặc biệt là sử dụng mô hình hộp số flexbox)?
@Michael_B, cảm ơn, lỗi của tôi. – harpo