CSS Display an Image Resized and Cropped

Question

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

Answer 1

With CSS3 it's possible to change the size of a background-image with background-size, fulfilling both goals at once.

There are a bunch of examples on css3.info.

Implemented based on your example, using donald_duck_4.jpg. In this case, background-size: cover; is just what you want - it fits the background-image to cover the entire area of the containing

and clips the excess (depending on the ratio).

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the 
, and clip the excess */
  background-size: cover;
}

Donald Duck!

css3 background-image background-size

0 讨论(0)

查看其它19个回答

发布评论:

提交评论

---

•  加载中...