웹 페이지의 이미지를 화면 크기에 맞게 표시하는 방법

실현하고 싶은 일

· 이미지를 왜곡하지 않고 웹 페이지의 너비에 맞게 표시 할 수 있기를 원합니다!

이미지 확대보기


이미지 축소 표시

환경

· Amazon Web Service
· Windows 10

주의점

・html과 CSS의 기술의 룰이나 기술의 방법에 대해서는 알고 있는 것을 전제로 진행하기 때문에
양해 바랍니다.

해결 절차

①CSS에 이하의 코드를 기술한다

css_practice.css

img {

  max-width: 100%; /*この記述で画面幅の100%の幅で画像を表示する*/
  height: auto; /*高さはautoで画像の最適化表示*/

}

이 설명을 통해 이미지의 크기를 웹 페이지의 너비에 맞게 최적화할 수 있습니다.

포인트

· max-width: 100%; 의 기술에 의해 이미지의 폭을 부모 요소의 100%의 폭에 맞춘다는 의미가 됩니다. 따라서 이미지의 너비가 화면에 맞출 수 있습니다.

・ height: auto; 의 기술에 의해 높이가 화면의 폭에 의해 자동으로 조정되게 됩니다. 따라서 이미지의 높이가 조정되지 않고 왜곡을 발생하는 등의 문제점을 해소할 수 있습니다.

참고 사이트

이하의 사이트를 참고로 했습니다.

· 이미지 크기 최적화