Question

125

CSS scale and square center crop image

rated 0 times [ 127] [ 2] / answers: 1 / hits: 55540 / 11 Years ago, wed, may 1, 2013, 12:00:00

So I have a collection of thumbnails in my app, which is the size of 200x200. Sometimes the original image doesn't have this ratio so I am planning to crop this image to a square.

Currently it just streches the image to fit into the thumbnail, so say my original image size is 400x800, then the image looks very squished. I wanted to crop this image so it looks at the shortest width/height and then crop it to a square, so in my example above it will be cropped to a 400x400.

Is there a way to easily do this via CSS or do I have to use some sort of JS to do this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyaleenag

Add To Favorites

Follow

Total Points: 678

Total Questions: 121

Total Answers: 105

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

harleyaleenag questions

1 How to use redis client in nestjs?

Thu, May 5, 22, 00:00, 2 Years ago

1 After build via Webpack 5 app stoped working on Internet Explorer (IE11)

Thu, Oct 22, 20, 00:00, 4 Years ago

1 TypeScript type for value of key in object

Wed, Aug 19, 20, 00:00, 4 Years ago

1 GDPR: youtube-nocookie embedded URL's, need visitors' permission?

Tue, May 19, 20, 00:00, 4 Years ago

1 How to wait for fetch to complete before rendering page in React.js

Thu, Mar 5, 20, 00:00, 4 Years ago

View All

answered 11 Years ago carlymykalac · Accepted Answer

You can do this easily in CSS if you use background-image.

.thumb {

    display: inline-block;

    width: 200px;

    height: 200px;

    margin: 5px;

    border: 3px solid #c99;

    background-position: center center;

    background-size: cover;

}

In this fiddle, first image is 400x800, second image is 800x400:

http://jsfiddle.net/samliew/tx7sf