When trying to resize an image using clip: rect() in HTML, I encountered a problem where the Inspect tool would display the original height and width of the image instead of the resized dimensions. My goal is to achieve the following:
- On a screen width of 1024, the full image should be displayed.
- On a screen width of 768, only the center part of the image should be visible.
- I want to achieve this effect using a single image.
I have also included screenshots of how the image should look like on screen widths of 1024 and 768 respectively.
Image (screen width = 1024)
Image (screen width = 768) Rotated to a 768*1024 aspect ratio
However, when inspecting the image at a width of 768, it continues to show its original dimensions, making it difficult for me to properly align my other code elements.
Below is the code that I am currently using:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (max-width: 1024px){
img
{
position:absolute;
clip:rect(0px,600px,450px,0px);
}
}
@media screen and (max-width: 768px){
img
{
position:absolute;
clip:rect(80px,400px,400px,190px);
}
}
</style>
</head>
<body>
<img src="sunset-splash-canada_63712_600x450.jpg"/>
</body>
</html>
After implementing the suggestion provided by @BASarat