Responsive Images in Contao

[Carolina]

Hello,

I'm developing my first responsive design website with Contao. And I'd like some clarification about working with responsive images.

I'm only using the Contao reset styles - non of the other Contao styles.

I've then created this rule:

.image_container img {
max-width: 100%;
height: auto;
}

The rule works well but I have images in two sizes in the front page: 320 x 355 and 640 x 355 which are set inline by Contao - no option to percentages or image sizes for different devices. And this means I have issues to sort out: like the bigger images starts gettting smaller in height to the smaller ones in the tablet, and in the mobile the first one is smaller than the second ones. Here's the website if you'd like to have a look: www.assembly21.com.

Also, I'd like to know how do I do if I want to make the whole image together with title and paragraph clickable without using JQuery. I tried placing the figure in the text section together with the other elements to wrap them within an <a> tag, but this squeezes the image.

Thanks in advance!

[Andreas]

Images in .image_container are inline by default (I personaly set them to block), but the .image_container is a block element. Your elements are visually displayed inline as your .ce_text.featuredProject are floated left.

I can't see, that an image is smaller than another. What I see is that your text in ".ce_text.featuredProject h1" and ".ce_text.featuredProject p" gets wraped. You can try white-space:nowrap; on this one.

ps Validate your HTML, there are duplicate IDs.

[Carolina]

Thanks, that all worked.

Would you know know to make the image_container the same size as the img? At the difference between them accounts for 5px at the bottom of the images between the rows on the front page.

The first image of the orrery, gets smaller in height when I resize the browser to tablet, so there's a gap at the bottom of it as compared to the square sized images.

And in the mobile, the bigger images get narrower than the squared ones.

Comments welcome! Thanks again.

[Andreas]

First you should block format your images in .image_container as inline images can not be styled pixel precisely.

.image_container img {
  display: block;
} 

Then, if you have a container with floated elements in it, you should set those containers to overflow hidden.

[id^="featured"] {
  overflow: hidden;
} 

You don't have to give elements an ID e.g. featuredfirst, featuredsecond ... if you don't style them with CSS or work on them with JS. You better give them a class "featured". So you can write the last code as

.featured {
  overflow: hidden;
} 

Contao normaly does this with

.block {
  overflow: hidden;
} 

You should not set those images to height 80% on a breakpoint - better is height auto.

Think about what happens, with max-width:100%; height:auto; on those images. First the surrounding FIGURE and DIVs try to get the whole width that is possible. Width: 100%; is browser default if they aren't floated or positioned absolute or fixed. Default height is auto. Now the images try to get as big as possible (640px or 320px) but not wider as the surrounding containers as they are set to max-width: 100%. Finally the images height gets adjusted to the measured width so they keep aspect ratio with height:auto;.

You have to consider all that and make a plan for the different breakpoints on how many images you want to show in a row and how big those images are.

[Carolina]

Yes, all that works except the last part. If I do: width: auto, height: auto, then when it gets to tablet, instead off all the images proportionally getting smaller (that looks a lot better for me), the square images have the same height as normal, but the width is smaller, so they look tall. And on the mobile the larger images show only a part and looks chopped.

What I want to do is what the do here: http://www.bureau-va.com/. I wonder if there's a way I could resize them for each device.

Thanks!.

[Andreas]

Looks ok for me.

If you have 3 images you have to set the surrounding div#project-n to the right values.

img_1 img_2 img_3
640   320   320
div_1 div_2 div_3
50%   25%   25%

img_1    img_2
640      320
div_1    div_2
66.6666% 33.3333%

Then again don't set an image to height:80%; and don't set it to width:auto; And you better set those rules I told you in my last post.

ps You have way to much unneccesary rules in your CSS. e.g. you don't have to set normal unfloated and unpositioned block elements to height:auto;, width:auto;, width:100%;, margin:0;, padding:0; ... unless you want to overwrite an earlier set value.

[Carolina]

Now one of the last issues to solve: if the image size is set inline within Contao and that is smaller than the size on mobile...what should I do? The approach should keep things simple. Thanks!.

[Andreas]

img {
  min-width: 100%;
}