Get images in diff dimensions for diff div classes and also responsive as well

[ronbon]

Hi,

Following challenge:

• I have a main article-headline image: 800x500px.
• I have a carousel which displays 3 article headline images at once.
• The CSS for those carousel-article-headline-image:

.carousel-article-headline-image {
height:200px;
width:300px;
}

and

.carousel-article-headline-image img {
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}

• I also use the main-article-headline-image in a grid menu with again above code but different div class and height and width px.

My objectives are to get my headline image to (1) autoresize to the carousel and to the grid menu and (2) the images are responsive to all device dimensions.

Autoresize I accomplished with above code. But responsiveness is lost (and working with @media queries… hmmm…Glasses

Before I had this code

<img src="assets/images/1.jpg" alt="1" width="40%" height="20%">

This made my images responsive, but auto-resizing into my carousel and grid menu didnt work.
I guess the percentages here do not scale down the images by 40 and 20%, or do they or should they (because it didnt happen in my test, my carousel showed 800x500px images either way!)???
Also, for this to work well I guess I would need to upload my images exactly and always with 800x500px dimensions and then scale them down by percentages for each div class? (which is do-able ofcourse if that is the only easiest way…?).

But I was thinking there is maybe a good solution that can both handle auto-resize AND responsiveness (my template is Bootstrap-3)? Or the priority being on responsiveness and allowing me to somehow get optimised image dimensions for my carousel and grid menu? Because how do I calculate those optimised image dimensions? (till now I was just playing around and moving percentages up and down to see the resulting layout… :(

[Author]

Posts