>  기사  >  웹 프론트엔드  >  CSS에서 img 이미지의 크기를 설정하는 방법

CSS에서 img 이미지의 크기를 설정하는 방법

下次还敢
下次还敢원래의
2024-04-26 11:48:13578검색

CSS에서 이미지 크기를 설정하려면 다음 속성을 사용할 수 있습니다. 1. 너비: 이미지의 너비를 설정합니다. 2. 높이: 사진의 높이를 설정합니다. 3. max-width 및 max-height: 이미지의 가로 세로 비율을 유지합니다.

CSS에서 img 이미지의 크기를 설정하는 방법

CSS에서 이미지 크기를 설정하는 방법

CSS에서 이미지 크기를 설정하려면 다음 속성을 사용할 수 있습니다.

  • width: 이미지의 너비를 설정합니다.
  • height: 이미지의 높이를 설정합니다.

고정 크기 설정

고정 크기 이미지를 설정하려면 widthheight 속성을 ​​각각 사용할 수 있습니다. widthheight 属性:

<code class="css">img {
  width: 200px;
  height: 150px;
}</code>

设置相对大小

您还可以使用百分比值来设置图片的相对大小,使其适应容器的大小:

<code class="css">img {
  width: 100%;
  height: auto;
}</code>

保持图片宽高比

要保持图片的宽高比,可以使用 max-widthmax-height

<code class="css">img {
  max-width: 100%;
  max-height: 100%;
}</code>

상대 크기 설정

백분율 값을 사용하여 컨테이너 크기에 맞도록 이미지의 상대적 크기를 설정할 수도 있습니다.

<code class="css">/* 设置固定大小的图片 */
img.fixed {
  width: 200px;
  height: 150px;
}

/* 设置相对大小的图片 */
img.relative {
  width: 100%;
  height: auto;
}

/* 保持图片宽高比 */
img.aspect-ratio {
  max-width: 100%;
  max-height: 100%;
}</code>
🎜이미지 가로 세로 비율 유지🎜🎜🎜이미지의 가로 세로 비율을 유지하려면 다음을 수행하세요. max-widthmax-height 속성 사용: 🎜rrreee🎜🎜Example🎜🎜🎜다음 예에서는 이러한 속성을 사용하여 다양한 크기의 이미지를 설정하는 방법을 보여줍니다. 🎜rrreee

위 내용은 CSS에서 img 이미지의 크기를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.