could anyone help me out on how to perform the following:
- there's a container (let's say a DIV element) with fixed dimensions (let's say 300x200 px)
- inside there's an image, the dimensions of which are unknown
- if the image is smaller than the container, it should be centered (horizontally + vertically)
- if the dimension(s) exceed/s the container, it should be shrunk so the larger dimension is viewed equal to the container's dimension
Practically this is "center the image in full size inside the container, but if it's too large, shrink it to full visibility".
Can I see the coding you used? text-align: center; worked for me, horizontally. You would have to use top padding to center the image vertically, and keep decreasing the height of the DIV as you increase the padding.
See the following code.
The purpose of the whole centering and shrinking process is that the size of picture.png is unknown and will change. Padding wouldn't work as it will depend on the actual size of the image.