How to "Crop" a Rectangular Image into a Square with CSS

How to crop a rectangular image into a square with CSS?

Assuming they do not have to be in IMG tags...

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

EDIT: If the div needs to link somewhere just adjust HTML and Styles like so:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

Note this could also be modified to be responsive, for example % widths and heights etc.

How to crop a rectangular image into a square using CSS?

If it doesn't need to be an img then I would create a div, make the image the background-image, force a pseudo element to make the height relative to the width of the div and then make the background image cover the div with background-size:

http://jsfiddle.net/8tqxvvzs/

div
{
    position: relative;
    display: block;
    background-image: url('http://placehold.it/350x150');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 25%;
}

div:before
{
    content: "";
    display: block;
    padding-top: 100%;
}

CSS - How to crop an image to a square, if it's already square then resize it

METHOD 1

Will work for horizontal rectangle images (larger in width), if you need vertical images you can change height:100% for width:100%

HTML

<div class="img-container">
    <img src="http://lorempixel.com/250/250" />
</div>

CSS

.img-container {
    width: 90px;
    height: 90px;
    overflow: hidden;
}
.img-container img {
    height: 100%;
}

Example fiddle First image is resized, second is cropped

METHOD 2

Works for all image sizes

HTML

<div class="img" style="background-image:url('http://lorempixel.com/250/250')"></div>

CSS

.img{
    width: 90px;
    height: 90px;
    background-size: cover;
}

Example fiddle

Crop image into square and then to circle using pure CSS?

You can use circle() but without the parameters:

.clipped {
   clip-path: circle();
}

It appears to use the smaller side of your image as the circle's circumference.

Working sample here.

It works on Chrome and FireFox. IE and Edge still does not support clip-path

How do I make images display as a square?

This really has nothing to do with Django or Bootstrap. You'll want to set your images as backgrounds on .image so they can be cropped to square.

<div class="image" style="background-image: url(/{{competition.image.url}});" ></div>

Also make sure you have CSS applied to fill the element with the background image:

.card .image {
    background-size: cover;
}

You could also try to force the image to stretch to 100% of the height of .image and hide the horizontal overflow, but the background approach is simpler.

How to center and crop an image to always appear in square shape with CSS?

jsFiddle Demo

div {
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

<div>
    <img src="https://i.postimg.cc/TwFrQXrP/plus-2.jpg" />
</div>

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

<div class="image-cropper">
  <img src="https://via.placeholder.com/150" class="rounded" />
</div>