반응형 이미지는 화면 크기에 관계없이 다양한 장치에 적응할 수 있는 이미지입니다. 요즘에는 웹사이트에서 반응형 이미지를 갖는 것이 매우 중요해졌습니다. 웹사이트 속도를 향상시킬 뿐만 아니라 모든 기기에서 멋진 사용자 경험을 제공합니다. 반응형 이미지는 브라우저 크기를 조정하여 크기도 조정됩니다.
반응형 이미지는 다양한 장치의 다양한 화면 크기에 효율적으로 적응합니다. 품질이 유지된다는 것을 보장합니다. 반응형 이미지를 갖춘 반응형 웹사이트는 확실히 참여도와 전환율을 높입니다. 미디어 쿼리와 함께 CSS를 사용하여 이미지를 반응형으로 만들 수 있습니다.
이 글에서는 HTML과 CSS를 사용하여 이미지를 반응형으로 만듭니다.
HTML과 CSS로 반응형 이미지를 만드는 방법은 무엇입니까?
HTML과 CSS를 사용하여 반응형 이미지를 만들려면 다음 단계를 따르세요.
방법 1: 'max-width' 속성 사용
이미지를 반응형으로 만드는 첫 번째 방법은 ' 최대 너비 ' 재산. “ 최대 너비 ” 속성은 이미지의 최대 너비를 정의하는 데 사용됩니다. 콘텐츠가 최대 너비를 초과하는 경우 요소의 높이가 변경됩니다.
HTML 만들기
HTML의
태그에 이미지 파일을 추가하려면CSS 추가
이제 외부 CSS 파일을 생성하고 “. CSS ” 파일 확장자를 HTML 파일의
태그 안에 연결합니다. CSS 파일에서 이미지 파일의 스타일을 지정하려면 img 태그로 시작하고 중괄호를 엽니다. 그런 다음 중괄호 안에 '를 추가합니다. 최대 너비: 100% ;” 컨테이너 내에서 이미지를 가로로 맞추려면 또한 이미지가 잘리는 것을 방지합니다. 그 뒤에 '를 추가하세요. 높이: 자동 ;” 높이를 자동으로 조정하면 이미지가 올바르게 표시됩니다.img {
최대 너비 : 100% ;
키 : 자동 ;
}
브라우저 창의 크기를 조정하여 이미지 크기가 어떻게 조정되는지 확인하세요.
방법 2: '너비' 속성 사용
이미지를 반응형으로 만드는 또 다른 방법은 ' 너비 '. 숙소 “ 너비 ”는 이미지와 텍스트의 너비를 정의합니다. 여백, 패딩 또는 테두리를 포함하지 않습니다. 이미지와 텍스트의 크기를 cm, px, % 형식으로 설정할 수 있습니다. 이미지를 반응형으로 만들려면 ' 너비 ” 속성을 “로 100 %”. 설정 ' 너비: 100% ;” 이는 이미지를 상위 요소만큼 크게 만든다는 의미입니다.
img {너비 : 100% ;
키 : 자동 ; }
위의 내용은 이미지가 반응한다는 것을 확인시켜줍니다. 반응하는지 여부를 확인하려면 브라우저 창의 크기를 조정하면 됩니다.
방법 3: 미디어 쿼리 적용
CSS 미디어 쿼리는 사용자가 웹페이지의 모양을 수정하는 데 도움이 됩니다. CSS 미디어 쿼리에는 조건이 포함되어 있으며 이러한 조건이 충족될 때마다 장치나 브라우저의 모양이 변경됩니다. 미디어 쿼리는 사용자가 이미지를 반응형으로 만드는 데 도움이 될 수도 있습니다. 따라서 먼저 “@ 미디어 ” 태그를 지정한 다음 “ 최대 너비 ” 속성을 사용하여 중괄호 안에 이미지의 최대 너비를 지정합니다. 이 조건이 충족될 때마다 이미지가 반응하게 됩니다. 그런 다음 중괄호를 추가하여 img 태그를 지정하고 ' 너비: 100% ;” 값:
@미디어 ( 최대 너비 : 480px ) {img {
너비 : 100% ;
}
}
메모 : 이미지는 지정된 조건을 충족하는 경우에만 반응합니다.
CSS 미디어 쿼리가 적용되었으며 이제 지정된 이미지 크기로 크기가 조정되면 이미지가 반응형으로 작동합니다. 그렇지 않으면 응답하지 않습니다.
결론
HTML과 CSS로 반응하는 이미지를 만들기 위해 사용자는 다양한 방법을 사용할 수 있습니다. 이러한 방법에는 '를 사용하여 반응형 이미지를 만드는 것이 포함됩니다. 최대 너비 ' 재산, ' 너비 ” 속성을 사용하고 CSS 미디어 쿼리도 적용합니다. 이 기사에서는 사용자에게 이미지를 반응형으로 만드는 완벽한 솔루션을 제시했습니다.