이미지 원본 크기를 작은 div 안에 유지하십시오.

이미지 크기가 600x400px이고 이미지 크기가 240x200px 인 작은 div 안에 넣고 싶지만 이미지가 축소되거나 왜곡됩니다. 이미지의 일부를 숨길 수있는 작은 div에 가운데에 원본 크기의 이미지가 있습니다.이미지 원본 크기를 작은 div 안에 유지하십시오.

서로 다른 이미지 크기에 적용하려면이 CSS 규칙을 작성했습니다.

.theBox { 
    float: left; 
    overflow: hidden; 
    width: 240px; 
    height: 200px; 
} 

.theBox img { 
    display: block; 
    height:100% !important; 
    width:100% !important; 
}

출처

2014-06-16 Nicoli

GIMP 또는 PhotoShop과 같은 프로그램을 사용하여 이미지의 크기를 조정하지 않는 이유는 무엇입니까? 왜곡 등 걱정할 필요가 없습니다. – eyoung100

미리보기 이미지를 많이 만들고 싶지 않기 때문에이 div에 표시된 이미지는 주요 기사에 대한 링크입니다. – Nicoli

당신이를 지정하는 경우가 준 차원으로 당신은 어떤 차이를 가지고 (폭 반대) 컨테이너에 맞게 높이를 설정 그렇게하지해야합니다 이미지의 100 % 크기. 그러면 이미지가 컨테이너의 100 %를 차지합니다.

원하는 것은 파일을 원래 크기로 유지하므로 이미지 크기를 지정하지 마십시오.

overflow:hidden은 이미지의 일부만 표시하는 키입니다.

이미지의 중앙을 항상 보이게하려면이 CSS3 속성 transform:translate(-50%,-50%)을 적절한 위치에 배치해야합니다.

이 jsfiddle을보고 도움이되는지 알려주세요.

출처

2014-06-16 18:27:48 morgul

완벽하게 작동합니다. 감사합니다. – Nicoli

@ Nicoli 참고 : [이미지 자동 크기 조정] (http://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container) – eyoung100

가로 세로 비율을 유지하려면 가로 세로 비율을 유지하려면 브라우저의 가로 세로 비율을 유지해야합니다.

이

.theBox img { 
    display: block; 
    height: 100%; 
}

예 : jsfiddle

출처

2014-06-16 18:07:57 MrWhite

나는 그것을 시도했지만 이미지가 왜곡되어 보이고, 단지 높이가 조절 된 것처럼 보입니다. – Nicoli

크기가 하나만 주어지면 왜곡되지 않아야하지만 자르면됩니다 (치수는 불가피합니다). 내 대답에 jsfiddle 예제를 추가했습니다. – MrWhite

이 해결책은 또한 정확하지만 morgul에서 나온 것이 나에게 무슨 일이 일어 났는지 이해하는 데 도움이되었습니다. 어쨌든, 여러분 모두에게 감사드립니다! – Nicoli

이미지에 100 % 크기를 지정하면 이미지가 컨테이너의 100 %를 차지합니다. 실제 크기를 유지하려면 다음과 같은 인라인 스타일을 작성해야합니다. style = "width : auto"

출처

2016-01-22 17:24:33 rahgozar

이미지 원본 크기를 작은 div 안에 유지하십시오.

답변

관련 문제