如何根据图像缩放图像-CSS

Question

I am soo bad at css. I have a div in which multiple images can be put. this div is a slide.

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

some images are eg 100x300 but some are 300x100. how can I scale those images according to their own dimensions so that they show up as in original form?

my live example with this bug is in here: http://wohne-wo-du-willst.de/angebot/Wohnung/ist-frei-in-Dachau/22/

as you slide, the 3rd slide image doesnot show up in its full form..

Answer 1

A big problem you have here is that your images aren't 100x300px or 300x100px, they're instead 1920x2560px or 2560x1920px - much, much larger. They're also all around 1MB in size, which in reality is far too large for images like this. Before doing anything you should resize these images yourself to make them their desired size and ultimately reduce their file size as well.

After that, simply remove the max-width and max-height properties from your #slides img selector, then modify width and height to:

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

The initial value sets the image size to its initial size; that means if your image is 100x300, that is also its initial size. Using this with the images you currently have will set them to 1920x2560 or 2560x1920.

I've unfortunately had to use !important here as the slide plugin will try to force your images to 100% width.

Answer 2

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

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