The next information that I will share this time is still about the website display design. Previously I shared about how to make the navbar responsive, now I will review how to make an image responsive when opened via a smartphone whose screen is smaller than the desktop.
Also Read: How to Create a Simple HTML CSS Responsive Website Navbar
We first create a tag to display the image
Fill in the image url that friends will display on the tag and make sure the url is correct so that the image appears perfectly. Next we need CSS to set the height and width of the image.
Here’s the CSS we need
.image {
width: 1263px;
height: 225px;
}
This size will have a good effect when our website design is open on the desktop, but if we are in the mobile version it will look like this:
 |
| desktop css testing no code |
As we can see, the image will expand to the right according to the initial css size, which is 1263px. Ok we don’t need to change the width of the css, let’s just say it’s a framework for our image. Next we add the following css code:
@media screen and (max-width:640px) {
.image {
width: 100%;
}
}
If we write correctly, it is certain that the image will match the width of the smartphone screen that we use to open the website design, such as the top image itself, the image display does not expand to the right but is in accordance with the screen.
Thank you for still being loyal to visit the Gapunyakode blog, I hope it can be useful, friend.
