이미지에 따라 이미지를 스케일하는 법 - css

Question

나는 CSS가 좋지 않다. 여러 이미지를 넣을 수있는 div가 있습니다. 이 div는 슬라이드입니다.

<div id="slides">     
    <img src="imagename.jpg"/>                 
</div> 

일부 이미지는 다음과 같습니다. 100x300이지만 일부는 300x100입니다. 자신의 크기에 따라 이미지의 크기를 조정하여 원래 형태대로 표시하려면 어떻게해야합니까?

Answer 1

큰 문제는 여기에 있습니다 .. 당신이 슬라이드로 http://wohne-wo-du-willst.de/angebot/Wohnung/ist-frei-in-Dachau/22/

가, 제 3 슬라이드 이미지가 완전한 형태로 표시 doesnot :이 버그

내 라이브 예는 여기에 이미지가 100x300px 또는 300x100px가 아니라면 1920x2560px 또는 2560x1920px입니다. 훨씬 더 큽니다. 그것들은 또한 크기가 1MB 정도입니다. 실제로 이와 같은 이미지에는 너무 큽니다. 무엇이든하기 전에 이미지 크기를 조정하여 원하는 크기로 만들고 궁극적으로 파일 크기를 줄여야합니다.

그 후, 간단히에 width 및 height 수정하여 #slides img 선택에서 max-width 및 max-height 속성을 제거합니다

이

#slides img { 
    ... 
    height: initial; 
    width: initial !important; 
} 

initial 값은 초기 크기로 이미지 크기를 설정을; 즉, 이미지가 100x300 인 경우 즉, 초기 크기입니다. 현재 사용중인 이미지에 이것을 사용하면 1920x2560 또는 2560x1920으로 설정됩니다.

슬라이드 플러그인이 이미지를 100 % 너비로 강제 표시하려고하므로 안타깝게도 !important을 사용해야했습니다.

Answer 2

<style> 
img 
    { 
     height:100%; 
     width:100%; 
    } 
</style> 

<div id="slides">     
<img src="imagename.jpg"/>                 
</div>