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

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

---

만약 내가 가지고 있다면:

#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 이미지에 적용되는 모든 것을 적용하십시오.

---

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;
}

도움이되는 희망

---

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

나는 당신이 생각합니다. 마음에 드는 유일한 것은 패딩이지만,이를 위해서는 미리 이미지의 크기를 알아야합니다.

---

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

---

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

---

All I did was change the style sheet of img tag. But in my case I knew the container div with and height. Also container div with, height was greater than actual image size. Hope this helps.

Worked for me.

http://guntucomputerhacks.blogspot.com.au/2014/08/force-image-width-and-height-without.html

---

If using flexbox is a valid option for you (don't need to suport old browsers), check my other answer here (which is possibly a duplicate of this one):

Basically you'd need to wrap your img tag in a div and your css would look like this:

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

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

---

You can use as below :

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

참고URL : https://stackoverflow.com/questions/1733006/how-to-set-an-images-width-and-height-without-stretching-it