2 replies [Last post]
ronbon
ronbon's picture
Offline
newbie
Last seen: 4 years 16 weeks ago
Timezone: GMT+2
Joined: 2015-04-09
Posts: 7
Points: 10

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;
}
[code]
 
and
 
[code]
.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 [code] <img src="assets/images/1.jpg" alt="1" width="40%" height="20%"> [code] 
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... :(
 
Thanks for any help or tips. 

ronbon
ronbon's picture
Offline
newbie
Last seen: 4 years 16 weeks ago
Timezone: GMT+2
Joined: 2015-04-09
Posts: 7
Points: 10

Sorry, the above came out wrong! Get images in diff dimensions f

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... Sad

Thanks for any help or tips.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 16 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Minimal test case?

I'd like to see a test case; preferably a link to the test case.

Believe it or not, you're making things more difficult by using another layer of abstraction in Bootstrap or any other so called foundation, template or whatever they call it this fashion season. Likewise the various "grid" systems* make things less semantic and use presentational class and id tokens, which is the antithesis of separating structure, presentation and behavior.

cheers,

gary

*Grid layout systems are an attempt by soi-disant designers to make the web page more closely follow the print meme represented by the paste-up board. There are those with clue about the web page's flow and re-flow who have no need of such rationalization. ~gt

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.