Geek Answers Handbook

Resize the image based on the size of the DIV it is in using CSS?

Below is an image of the blog I'm working on. I need help with some CSS. In the top image, you can see what happens to my avatar when the text body to the right of it is larger than the image.

The bottom image is how I want it to look.

My problem is that there are several authors, so the body text on the right can be of different lengths depending on the author. I would like to somehow resize the image to always fit in the div and look like the one in the lower image.

Hope it all made sense, if anyone knows how to do this, I would appreciate any help

I will also give an example code to see it live on http://dabblet.com/gist/2050005

enter image description here

+5
source share
4 answers

Force the image to a specific size, regardless of the size of the original.

CSS

.size-image img {
width: 200px;
height: 200px;
}

Size - any size you need / want to fill. In html, just add a class to the element img.

<img src="path/to/image" class="size-image" />

Then any image placed in this element, whether using jquery, php or any other, the size of the element depends on what you need / need.

You can also put the image in your own container, say, “left container” and have the width of the left container of a certain width with automatic height, just put the tag <img>in the left container and the text in the “right container”

,

+2

.

css

img {   max-width: 100%;   -: 100% }

+1

Why can't you just do:

<!doctype html>
<html>
    <head>
        <style type="text/css">
            #img-div { width: 250px; }
            #img-div img { width: 100%; }
            #text-div {  }
        </style>
    </head>
    <body>
        <div id="img-div">
            <img src="example.jpg" />
        </div>
        <div id="text-div">
            Lorem ipsum dolor blah blah blah
        </div>
    </body>
</html>

This works for me. The only problem is that the actual image is less than the width of the containing one div, then it becomes pixelated.

0
source

I use this:

.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}
0
source

More articles:


All Articles