>

한 섹션의 나머지 div에 잘 맞게 정렬 된 이미지 태그가 있습니다. 그러나 창 크기를 조정하면 이미지가 축소되거나 확장되기 시작합니다. 이 문제가 발생하지 않도록 CSS에서 무엇을 할 수 있습니까?

.img-test {
     width: 33.87%; 
     position: absolute;
     max-width: none;
   } 
 .clothes {
    background-color: #d04925;
    float: right;
    height: 805px;
  }

.clothes 클래스가있는 이미지와 div는 서로 옆에 있으며 그렇게 유지해야합니다.

  • 답변 # 1

    최대 너비, 최소 너비, 최대 높이, 최소 높이 속성을 사용하여 이미지 크기가 조정되지 않도록 할 수 있습니다. 자세한 내용은 다음 링크를 참조하십시오. w3schools

  • 답변 # 2

    안녕하세요. StackOverflow에 오신 것을 환영합니다!

    이미지를 백분율 값, 즉 상위 컨테이너의 일부로 설정했습니다. 따라서 부모 컨테이너가 줄어들면 그 일부가 작아지고 이미지도 줄어 듭니다! 이제 이것을 막을 방법이 있습니다. 당신은 min-width 를 설정할 수 있습니다 이미지의 최소 너비를 정의합니다. 따라서이 너비로 줄어들지 만 아래로 줄어들지는 않습니다.

    .img-test {
      width: 33.87%;
      min-width: 300px;
    }
    
    

    이 예에서 이미지는 300px보다 작을 수 없습니다. 당신은 또한 min-width 를 생략 할 수 있습니다  속성을 지정하고 고정 너비를 직접 설정하십시오. 그러나 앞서 언급 한 것처럼 "멋지게 보이게"만들었으므로 브라우저의 뷰포트가 너무 작 으면 전체 UI가 손상 될 수 있습니다.

    따라서 특정 너비에서만 작동하는 경우레이아웃을 다시 생각하는 것이 좋습니다. 이를 수행하는 한 가지 방법은 미디어 쿼리입니다. CSS에서 중단 점을 정의하고 뷰포트가 작아지면 다른 CSS 규칙이 적용됩니다. 여기 및 여기에서 이에 대한 자세한 내용을 읽을 수 있습니다.

    작은 주제 이외의 추가 사항 :기본값 max-width   none 입니다  상속되지 않으므로이 값으로 설정할 이유가 없습니다.

  • 답변 # 3

    이미지의 크기가 조정되지 않도록 높이 속성을 일부 값으로 설정해야합니다. 예

    .img-test{
             height: 200px;
             position: absolute;
             min-width: 300px;
             width: 33.87%; 
             }
    
    

    이것이 도움이 될 것입니다. 이미지가 높이가 바뀌는 div 안에 있지 않으면

  • 이전 mysql - where 절을 갖는 것으로 그룹화
  • 다음 r - compose 함수와 함께`purrr - : map` 사용