<p>svg 이미지가 포함된 반응형 그리드 영역을 만들려고 하면 임의의 그리드 영역 너비, 이미지를 멈추지 않고 특정 지점까지 늘리거나 줄일 수 없는 등의 이상한 동작이 발생합니다. 내가 얻은 가장 가까운 것은: </p>
<p>
<pre class="brush:css;toolbar:false;">* {
상자 크기 조정: 테두리 상자;
}
몸 {
여백: 0;
}
머리글 {
디스플레이: 그리드;
그리드 템플릿 열: 자동 1fr;
배경색: 녹색;
패딩: 1rem;
}
img {
너비: 100%;
최대 너비: 25vw;
최소 너비: 12rem;
배경색: 분홍색;
}
div {
배경색: 빨간색;
텍스트 정렬: 중앙;
}
탐색 {
배경색: 노란색;
그리드-열: 범위 2;
}</pre>
<pre class="brush:html;toolbar:false;"><header>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 324 413.28'%3E%3Cect 클래스='655de5e2- 44d3-4b5a-ae63-e6e7ec799246' x='18' y='18.12' 너비='288' 높이='324' 채우기='blue'/%3E%3C/svg%3E">
<div>
제목
<p>텍스트 줄 1</p>
<p>텍스트 줄 2</p>
<p>텍스트 줄 3</p>
</div>
<탐색>
<a href="#">메뉴 항목 1
