CSS는 이미지 크기 조정을 어떻게 처리합니까?

Question

HTML 구조
`<dl onclick="goDetail(1)" class="cookbook-list">
<dt class="cookbook-img">
<img src="http://s1 .cdn.xiangha.com/cai...
</dt>
<dd class="cookbook-name">돼지갈비밥</dd>
<dd class="cookbook-des"> 양을 튼튼하게 하고, 양을 강화하고, 신장에 영양을 공급하고, 음에 영양을 공급하고, 신장, 기 및 혈액에 영양을 공급합니다</dd></dl>`

으아악

img 태그의 이미지가 완전히 표시되지 않습니다. 정상적인 비율에 따라 완전히 표시되도록 하려면 어떻게 해야 하나요?

Answer 1

백분율 관계 사용, 원칙: p>img，其中 p 标签为相对定位，高度为一个百分比，img 절대 위치 지정을 사용하여 상위 개체를 채웁니다. 코드는 다음과 같습니다.

으아아아

너비는 실제 너비를 기준으로 결정됩니다. 페이지 너비는 화면 너비 또는 상위 컨테이너의 너비여야 합니다. 해당 상위 컨테이너가 자유롭게 변형 가능한 경우 해당 높이는 비례 관계에 따라 조정됩니다. 비례적으로.

Answer 2

img{
디스플레이: 블록;
최대 너비: 100%;
}

Answer 3

배경이 있는 이미지를 로드
한 다음
배경 크기:포함
배경 반복: no-repeat

을 설정합니다.

Answer 4

화면 크기에 따라 변경되는 rem 레이아웃을 사용하세요

Answer 5

이미지에 img{width:100%;} 스타일을 추가하세요

Answer 6

• 페이지 레이아웃

  으아아아

• 상위 요소의 너비는 백분율 또는 너비로 결정됩니다. img가 100%로 처리되면 자동으로 상위 창을 채웁니다. 사용한다면 CSS 스타일을 분리해주세요

img 요소는 일반적으로 상자에 포함되어 있으며 주로 작동과 선택을 용이하게 합니다.