My question is should I just always give the container of the img a set width and then give the image a width:100%? And where should I set the max-width, container or image itself? Same question with the height.
http://thoroughbredstrategies.com/ my site here I have 3 images in a row and I have given them all same set width and height. Which isn’t going to be very responsive.
Also to stop the images looking stretch I plan to use object-fit:cover and object-position: center center. Is the correct way?
To make it more responsive I was going to set the container of the images to :
The right method depends on the exact behaviour and layout you want from the images.
The very simplest thing you can do is:-
img {
width: 100%;
height: auto;
}
Any block element that contains the image will be naturally responsive an the 100% will make the image stretch to fit, while height: auto maintains the aspect ratio.
Though in some cases you may require a different set up. for example in some cases the container may be way wider than the original image resolution, so width: 100% will blow the image up making it blurry. That’s where I tend to use max-width: 100% instead, so the image does not exceed its native size, or the container size on smaller screens.
Where you want to control an explicit max width and height, use the html attributes in the img tag, then use css to override that to become responsive.