CODEWITHSUNDEEP
htmlcss
Niklas Rosencrantz
Niklas Rosencrantz

Reputation: 26637

How can I adjust my thumbnail which exceeds its designated area?

I have images uploads and when the images and displayed as thumbnails then sometimes they are too large and overlap the area.

enter image description here

How can I change my code so that the image will not overlap the area? It seems to happen for images that are tall. One possibility would be to adjust the size of the thumbnail but I'm reluctant to do that and I wonder if there is some other solution. The html is available here and the css is available here. I created a fiddle with the problem. I'm thinking of either using the answer here or reducing the image size like this.

url = images.get_serving_url(str(image.primary_image.key()),
                                 size=110)

Upvotes: 0

Views: 30

Answers (1)

meiamsome
meiamsome

Reputation: 2944

It may be beneficial to have these as your styles:

max-width: <width>;
max-height: <height>;
width: auto;
height: auto;

This will keep the image at the correct aspect ratio and maximise either the width or height or both so that the image does not exceed the width and height set on the max-width and max-height parameters.

Upvotes: 2

Related Questions