CSS Display an Image Resized and Cropped

前端 未结 19 1854
时光取名叫无心
时光取名叫无心 2020-11-22 08:09

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 imag

19条回答
  •  时光取名叫无心
    2020-11-22 09:04

    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;
        }
        
    Donald Duck

    You can use negative margin to move the image around within the

    .

提交回复
热议问题