HTML Crop a picture for phone

Question

I have a landscape picture on my desktop preview (1920x1080) and I'd like to crop it to portrait (960x1080) when I'm on phone. How can I do it ?

Michael Müller · Answer

You could do it depending on the screensize:

@media only screen and (max-width: 1080px) {
img {
    height: 960px;
    width: 1080px;
}}

Change the size of the element when the browser window is 1080px wide or less

emgx · Answer

Although not very useful for responsive design, if you really want to crop the image to a fixed size, you could use the CSS clip property.

@media screen and (max-width: 1080px) {
    img {]
        clip: rect(0px,960px,1080px,0px);
    }
}