Make image fit in slideshow container

html css slideshow

18,211

Since the image is contained by the sub div, apply your 240px height to the sub div and then make the img have 100% height

.slideshow > div {
    position: absolute;
    max-width: 100%;
    width: 100%;
    height: 240px;
    max-height: 100%;
}

.slideshow > div > img {
    height: 100%;
    width: 100%;
}

JSFiddle: http://jsfiddle.net/L5NgN/

18,211

Author by

rshah

I started learning programming, and the Object Oriented Programming concept through modifications of games. These games include Runescape (creating private, offshore-hosted servers) and Minecraft. Since these games have pre-written code, it enabled me to develop my problem-solving skills by working with code that has already been produced. Then I started developing minor 2D games in Python and Java, obviously none of which got past the alpha trial stage, and I went on to learning SQL, PHP and web design. I started a small hosting company called WireTrunk, lasting 3 months, but we shut it down after more cheaper hosting sites became available. Then I went on to developing websites for indie game companies such as Cliffedge Studios (now deprecated).

Updated on June 07, 2022

Comments

rshah about 2 years

I am making a simple slideshow that will go on a website I am making and the images I use/need are larger than the div itself!

They dont overflow as I used overflow: hidden, however they dont shrink to fit the container!

I tried adding things like max-width: 100% and things like that but none of it works :(

Here is my code so far: http://jsfiddle.net/V7Cv9/
rshah almost 10 years

This works! But some of my images still dont really fit the container: i.imgur.com/zoAPkhk.png
rshah almost 10 years

actually! I fixed that by using width: 100%; for the img also! Thanks for the help!