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

만약 내가 가지고 있다면:

#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" />

캡슐화 <div> 또는 <span>을 추가해야합니까?

그렇게 생각합니다. 마음에 떠오르는 유일한 것은 패딩이지만,이를 위해서는 미리 이미지의 크기를 알아야합니다.

높이 / 너비 대신 패딩을 설정할 수 있습니다.

내가 생각할 수있는 것은 너비 나 높이를 늘리고 비율 측면에서 크기를 조정하는 것입니다. 측면에 약간의 공백이 있습니다. 와이드 스크린이 1024x768의 해상도를 표시하는 것과 같은 것입니다.

flexbox를 사용하는 것이 유효한 옵션이면 (이전 브라우저를 지원할 필요가 없음) 여기에서 다른 답변을 확인 하십시오 (이것의 중복 일 수 있음).

기본적으로 img 태그를 div에 래핑해야하며 CSS는 다음과 같습니다.

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

이것은 꽤 오래된 질문이지만 Chrome / Edge (객체 맞춤 속성 포함)에서 모든 것이 잘 작동했지만 동일한 CSS 속성이 IE11에서 작동하지 않는 (IE11에서 지원되지 않기 때문에) 똑같은 성가신 문제가 발생했습니다. 내 모든 문제를 해결 한 HTML5 "figure"요소를 사용합니다.

제 경우에는 전혀 도움이되지 않았기 때문에 개인적으로 외부 DIV 태그를 사용하지 않았으므로 외부 DIV를 피하고 단순히 'figure'요소로 대체했습니다.

아래 코드는 이미지를 강제로 축소 / 축소하도록합니다 (원래 종횡비를 변경하지 않고).

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

및 CSS 클래스 :

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}