Home/ Questions/Q 113967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T02:47:09+00:00

I want to show an image from an URL with a certain width and

  • 0

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I want.

I can resize with html img property and I can cut with background-image.
How can I do both?

Example:

This image:

enter image description here

Has the size 800x600 pixels and I want to show like an image of 200x100 pixels

With img I can resize the image 200x150px:

<img      style='width: 200px; height: 150px;'      src='https://i.stack.imgur.com/wPh0S.jpg'>

That gives me this:

<img style='width: 200px; height: 150px;' src='https://i.stack.imgur.com/wPh0S.jpg'>

And with background-image I can cut the image 200x100 pixels.

<div      style='background-image:            url('https://i.stack.imgur.com/wPh0S.jpg');      width:200px;      height:100px;      background-position:center;'>&nbsp;</div>

Gives me:

    <div style='background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;'>&nbsp;</div>

How can I do both?
Resize the image and then cut it the size I want?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. You could use a combination of both methods eg.

        .crop {         width: 200px;         height: 150px;         overflow: hidden;     }      .crop img {         width: 400px;         height: 300px;         margin: -75px 0 0 -100px;     }
        <div class='crop'>         <img src='https://i.stack.imgur.com/wPh0S.jpg' alt='Donald Duck'>     </div>

    You can use negative margin to move the image around within the <div/>.

    • 0