Responsive Images in Contao
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!