Question

well, I have a div holder with dimensions width:200px and height:110px.

When i load an image, normally it exceeds such dimensions, so i need to adjust the image to such content by width or height depending of the dimensions of the image. So, if its adjusted by with, three situations may occur:

1.- height is higher than 110px, so as the div overflow is set to hidden, it will need to center it vertically.

2.- height is equal than 110px, no problem.

3.- (The issue) height is less than 110px. What’s suponed i should do in this situation? because I want to cover all the div content.

Thanks.

Answer 1

If you load the image as a background for the container, you can mess around with background-size: cover or background-size: contain and use background-position: center center to keep it in the middle regardless of size.

Alternatively, you might want to use a table cell, as these allow contents to be vertically aligned inside (either use a table with one cell, or display: table-cell on the container).