[html] 이미지를 늘리지 않고 너비와 높이를 설정하는 방법은 무엇입니까?

Program / 글쓴이

만약 내가 가지고 있다면:

#logo {
    width: 400px;
    height: 200px;
}

그때 

<img id="logo" src="logo.jpg"/>

그 공간을 채우기 위해 늘어납니다. 이미지가 같은 크기로 유지되기를 원하지만 DOM에서 그 정도의 공간을 차지합니다. 캡슐화 <div>또는 추가해야 <span>합니까? 스타일링을 위해 마크 업을 추가하는 것이 싫습니다.

답변

예, 캡슐화 div가 필요합니다.

<div id="logo"><img src="logo.jpg"></div>

다음과 같이

#logo { height: 100px; width: 200px; overflow: hidden; }

다른 솔루션 (패딩, 여백)은 더 지루하지만 (이미지의 크기를 기반으로 올바른 값을 계산해야한다는 점에서) 컨테이너가 이미지보다 작을 수 있도록 효과적으로 허용하지 않습니다.

또한 위의 내용은 다른 레이아웃에 대해 훨씬 더 쉽게 적용 할 수 있습니다. 예를 들어 오른쪽 하단에 이미지를 원하는 경우 :

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

답변

2017 년 답변

CSS 개체 맞춤 은 모든 현재 브라우저에서 작동합니다. 이것은 허용 img요소 화상 연신없이 크게.

object-fit: cover;CSS에 추가 할 수 있습니다 .

답변

div의 배경으로 이미지를로드합니다.

대신에:

<img id='logo' src='picture.jpg'>

하다

<div id='logo' style='background:url(picture.jpg)'></div>

모든 브라우저는 맞지 않는 이미지 부분을 자릅니다.
이는 오버플로가 숨겨진 요소를 래핑하는 것보다 몇 가지 장점이 있습니다.

  1. 추가 마크 업이 없습니다. div는 단순히 img를 대체합니다.
  2. 이미지를 쉽게 중앙에 배치하거나 다른 오프셋으로 설정할 수 있습니다. 예.url(pic) center top;
  3. 충분히 작을 때 이미지를 반복하십시오. (좋아, 왜 그걸 원하는지 모르겠어)
  4. 동일한 명령문에서 bg 색상을 설정하고 동일한 이미지를 여러 요소에 쉽게 적용하고 bg 이미지에 적용되는 모든 것을 적용하십시오.

업데이트 :이 대답은 개체 맞춤 이전의 것입니다. 이제 아마도 object-fit / object-position을 사용해야합니다.

이전 브라우저, 추가 속성 (예 : background-repeat) 및 엣지 케이스 (예 : 플렉스 박스 및 개체 위치가있는 Chrome 버그 및 그리드 + 자동 높이 + 개체와 관련된 FF (이전?) 문제 해결)에 여전히 유용합니다. 그리드 / 플렉스 박스의 래퍼 div는 종종 직관적이지 않은 결과를 제공합니다.)

답변

CSS3 객체 맞춤

webkit, IE 및 firefox에서 얼마나 멀리 구현되었는지 잘 모르겠습니다. 하지만 오페라는 마법처럼 작동합니다

object-fitSVG 콘텐츠에서 작동하지만 preserveAspectRatio=""SVG 자체에서 속성 을 설정하여 동일한 효과를 얻을 수도 있습니다 .

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

Chris Mills 데모 http://dev.opera.com/articles/view/css3-object-fit-object-position/

답변

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

답변

div를 만들고 수업을 제공하십시오. 그런 다음 그 안에 img를 놓습니다.

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

div의 크기를 설정하고 상대적으로 만듭니다.

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

그런 다음 이미지 스타일링

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

도움이되는 희망

답변

다음과 같이 사용할 수 있습니다.

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}
<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

스 니펫 확장