Sau khi loay hoay một thời gian với vấn đề này, tôi nghĩ rằng đây không phải là vấn đề với bố cục lưới.
Vì bạn không bao giờ xác định chiều cao / chiều cao tối đa hoặc chiều rộng / chiều rộng tối đa cho SVG của mình, những gì đang được tính toán là width:autovàheight:auto
Lưu ý: Tôi hiển thị chiều cao tối đa / chiều rộng tối đa vì các giá trị này sẽ được ưu tiên hơn các giá trị chiều rộng / chiều cao .
Bây giờ, tại sao bố cục phong cảnh của bạn hoạt động và bố cục chân dung của bạn không hoạt động? Bởi vì chiều rộng là "ưu tiên" so với chiều cao của bạn.
Và đó là lý do tại sao, trong bố cục khối, chiều cao tự động dựa trên tổng chiều cao của con cháu và chiều rộng tự động dựa trên chiều rộng khối chứa.
Nguồn - Tại sao width: auto hoạt động khác với height: auto?
Điều này có nghĩa là SVG của bạn đang lấy widthtừ thùng chứa của nó và heighttừ hậu duệ của nó.
Trong ví dụ của bạn, SVG của bạn không có con cháu, nhưng có cha mẹ với chiều rộng tối đa được xác định . Nhưng điều này có ý nghĩa gì đối với chiều cao của SVG ?
SVG đang tính toán chiều cao của nó thông qua tỷ lệ intrisic:
Nếu phần tử 'viewBox' trên phần tử 'svg' được chỉ định chính xác:
- đặt viewbox là viewbox được xác định bởi thuộc tính 'viewBox' trên phần tử 'svg'
- trả về viewbox. thong / viewbox.height
Nguồn
Và tỷ lệ intrisic của bạn là 1/1 = 1
Vì vậy, bạn đang ép buộc height=width
Bản đồ đường viền)
Giải pháp là đặt a widthhoặc a margincho SVG của bạn tùy thuộc vào tỷ lệ div gốc của bạn.
Trong ví dụ bạn đã đưa ra, bạn có tỷ lệ 2: 1 vì vậy SVG của bạn nên có width:50%hoặc margin: 0 25%.
Điều này có nghĩa là nếu bạn muốn đặt một tỷ lệ khác, bạn phải điều chỉnh cho phù hợp (xem chân dung-1-3 trong mã dưới đây).
Có thể tránh đặt quy tắc CSS cho từng tỷ lệ nếu heightkhông phải là một ràng buộc, vì bạn có thể xác định một widthcho SVG và vùng chứa của mình, để các thành phần điều chỉnh heightđể giữ tỷ lệ khung hình của bạn.
Tôi cũng đã thêm một ví dụ cuối cùng nếu ai đó không quan tâm đến việc giữ tỷ lệ khung hình nhưng cần chứa SVG trong một bộ heightvà widththùng chứa.
.container {
display: grid;
background-color: greenyellow;
margin: 5px;
min-height: 10px;
min-width: 10px;
}
.portrait {
max-height: 100px;
max-width: 200px;
}
/* Add 25% margin left and right to center the image OR set the image width to 50% */
.portrait>.aspect-ratio {
margin: 0 25%;
/*
or
width:50%;
*/
}
.landscape {
max-height: 200px;
max-width: 100px;
}
.aspect-ratio {
grid-column: 1;
grid-row: 1;
background-color: deeppink;
border-radius: 50%;
align-self: center;
justify-self: center;
}
/* Set fixed max-height and max-width rule (33% proportion) */
.portrait-1-3 {
max-height: 100px;
max-width: 300px;
}
/* Align image with the new proportion */
.portrait-1-3>.aspect-ratio {
margin: 0 33.33%;
/*
or
width:33.3%;
*/
}
/* Removed max-height and let the container adjust the height according to the max-width rule and the proportion set */
.portrait-any-height {
max-width: 400px;
}
/* Height will be adjusted through the width/margin defined here, so 10% width will correspond to 40px of height (10%*400px)*(aspect ratio=1)*/
.portrait-any-height>.aspect-ratio {
width:10%;
}
/* Set fixed max-height and max-width rule (proportion doesn't matter) */
.portrait-squeezed {
max-height: 100px;
max-width: 300px;
}
/* Make sure SVG complies with the the given max with and height (squeezing your svg) */
.portrait-squeezed>.aspect-ratio {
max-height: inherit;
max-width: inherit;
}
<div class="container landscape">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
<div class="container portrait">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
<div class="container portrait-1-3">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
<div class="container portrait-any-height">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
<div class="container portrait-squeezed">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
Xin lưu ý rằng tôi không thành thạo khi làm việc với SVG và phản hồi này là kết quả của nghiên cứu và rất nhiều thử nghiệm! Tôi rất vui khi nhận được bất kỳ điều chỉnh và / hoặc sửa chữa cho phản hồi của tôi.
