Responsive, semantic images with CSS

added by JavaScript Kicks
7/9/2018 7:41:09 AM

303 Views

To have an image that doesn't try to stretch to its width/height the classic CSS is as follows: .thumbnail { width: 50px; height: 50px; background-size: cover; background-position: center;} With this associated HTML (inline styles... 👎): We can do: .thumbnail { width: 50px; height: 50px; object-fit: cover; object-position: center;} With the following HTML: This was sent out on the Code with Hugo newsletter last Monday.


0 comments