Home Ask Login Register

Developers Planet

Your answer is one click away!

peter vries February 2016

scale entire table with images

I'm making this responsive webpage: http://jsfiddle.net/GeDxr/174/

I need the images in the screen to be seperate, so I put them in a table. Problem is, the table screws up when resizing. Is there any way to keep the 'screen' a neat image, consisting of these different parts?

Current table / images in cell css:

    table {
    width: 100%;
    background-color: #00BF6E;
    min-height: 100%;
}

img {
    width: auto;
    height: auto;
}

Thanks!

Answers


Hans van Wijk February 2016

You have a min-height on your images. I commented this out for you in the follwing code:

.css-mb .mb-screen img {
  width: 100%;
  /* min-height: 100%; <-- remove this */
  position: center;
}

If you give a min-width and a min-height the images will get distorted because the width-height ratio changes (they both fill 100% of the available space). Using only a min-width makes sure the ratio stays intact.

Post Status

Asked in February 2016
Viewed 2,559 times
Voted 11
Answered 1 times

Search




Leave an answer


Quote of the day: live life