CODEWITHSUNDEEP
htmlcss
Bogdan
Bogdan

Reputation: 103

HTML and CSS cut image height

I have a simple html document, containing one parent div and two additional divs (one is left and the other one is right, both of them having max-width: 200px).

What I want to achieve, is having the height of this two divs equal while the left one contains text and the other one an image, both of them being center horizontally-aligned. If the image taller then the text it is also vertically center aligned, and of course if the text is taller then the image, it will be vertically aligned.

I use display: table for the parent, and display table-cell for the two divs. So far it works as I want, but for some reason the height of the image is less than the original one. For instance, an image having the height represented by 480px will be reduced to 300px and so on. Here is my code:

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

#parent {
    border: 1px solid black;
    display: table;
}

#left {
    width: 200px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

#right {
    width: 200px;
    display: table-cell;
    vertical-align: middle;
}

#right img {
    max-width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>

<div id="parent">

    <div id="left">
        Un div parinte (chenarul negru) va contine doua divuri interioare, unul in stanga si unul in dreapta. Cele
        doua
        div-uri interioare au fiecare latimea fixa de 200 de pixeli.Div-ul interior din stanga contine text centrat
    </div>

    <div id="right">
        <img src="http://s1.1zoom.me/b7559/911/Sky_Fields_Clouds_Trees_526506_320x480.jpg"/>
    </div>
</div>

</body>
</html>

Upvotes: 0

Views: 233

Answers (4)

divy3993
divy3993

Reputation: 5810

Everything you did seems correct, there is nothing incorrect in your code for sure.

So what is that giving you a hard time?

Answer: Image sets maintaining the aspect ratio.

A little deep dive...

What is Aspect Ratio: The ratio of the width to the height.

In the case here, the ratio of image width to the image height. That is 320px/480px as width of image is 320px and height of image is 480px.

So ratio 320/480 would be equals to 0.66666.

Now, if we change the width for the same ratio; the height would change too.

So let us say width is 200px (same as the above situation), which gives us height as 200px/height = 0.66666.

So height = 200/0.66666 = 300.00300 ~ 300px.

Update:

You: "for some reason the height of the image is less than the original one."

If you notice not ONLY the height of an image is less, but ALSO the width of an image is less/reduced. So that is the actual reason.

Phew! we took the detour to some math stuff.

Hope this might help you.

Upvotes: 1

Cathy
Cathy

Reputation: 69

Your image size is responding to the max-width you placed on it's container. If the image width is larger than 200px the height will reduce to the same ratio e.g. if the original height/width is 320/480 the new size will be 200/300 which is a 1.6 ratio.

Upvotes: 0

Kotikigor
Kotikigor

Reputation: 3

Make an image with a

background
background-size 
background-position

Upvotes: -1

Rasel
Rasel

Reputation: 153

#right img {
    max-width: 200px;
    max-hight: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Upvotes: 1

Related Questions