CSS: how to create a mobile images full display size, centered and responsive, on mobile | iBuild.PH Knowledgebase

To create a responsive image displays that can cover large portion of your mobile display while retaining the centering and responsiveness for both desktop and mobile, you may apply the following CSS on your image:

.your-css-selector img {
     display: block;
     width: 100%;
     height: 60vh;
     object-fit: cover;
}

Example below of before and after, each for desktop and mobile display views, respectively.

Before

With the usual fixed height using pixels (px) without responsiveness for display and centering; issues here are that the image is not responsive and does not center when switched to mobile, and has a fixed height that is inherited also on mobile, thus a shorter height display:

.your-css-selector img {
     display: block;
     width: 100%;
     height: auto;
}

After

With the applied vertical-height (vh) attribute, and the object-fit: cover, both to retain the centered image at the same time provides for a responsive full image display sizes for both desktop and mobile, without using media queries to control the displays for different mobile devices:

.your-css-selector img {
display: block;
width: 100%;
height: 60vh;
object-fit: cover;
}