Crop an Image to Square Using Percentages and Max Widths

CSS crop a image to a square

You can use a background-image to accomplish this, with the cover background-size.

DEMO

In the demo I am using an image with rectangular dimensions(400x200) but the div element has a height and width of 200px.

By using the cover value you maintain the original aspect ratio of the image and cover the visible area of the element, essentially cropping the image.

div {  background: #2a2828 url("http://lorempixel.com/400/200/") no-repeat center center/cover;  height: 200px;  width: 200px;}

<div></div>

How to crop boostrap image to get width 285 and height 170 of all images?

Have you ever heard of object-fit?

The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.

Here's an example of what object-fit does to your image, and how it can be used: http://jsfiddle.net/8ba7zjhs/

HTML

<img class="niceImage" src="http://assets1.ignimgs.com/2013/09/17/trevorjpg-883566_1280w.jpg">

CSS

.niceImage {
    width: 385px;
    height: 140px;
    object-fit: cover;
    object-position: center;
}

Learn more about object-fit here:
> css-tricks object-fit

> Mozilla object-fit

Note: All the browsers support object-fit nowadays except for Internet explorer, who is still considering to implement it as well.

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>

App Engine Cropping to a Specific Width and Height

I had a similar problem (your screenshot was very useful). This is my solution:

def rescale(img_data, width, height, halign='middle', valign='middle'):
  """Resize then optionally crop a given image.

  Attributes:
    img_data: The image data
    width: The desired width
    height: The desired height
    halign: Acts like photoshop's 'Canvas Size' function, horizontally
            aligning the crop to left, middle or right
    valign: Verticallly aligns the crop to top, middle or bottom

  """
  image = images.Image(img_data)

  desired_wh_ratio = float(width) / float(height)
  wh_ratio = float(image.width) / float(image.height)

  if desired_wh_ratio > wh_ratio:
    # resize to width, then crop to height
    image.resize(width=width)
    image.execute_transforms()
    trim_y = (float(image.height - height) / 2) / image.height
    if valign == 'top':
      image.crop(0.0, 0.0, 1.0, 1 - (2 * trim_y))
    elif valign == 'bottom':
      image.crop(0.0, (2 * trim_y), 1.0, 1.0)
    else:
      image.crop(0.0, trim_y, 1.0, 1 - trim_y)
  else:
    # resize to height, then crop to width
    image.resize(height=height)
    image.execute_transforms()
    trim_x = (float(image.width - width) / 2) / image.width
    if halign == 'left':
      image.crop(0.0, 0.0, 1 - (2 * trim_x), 1.0)
    elif halign == 'right':
      image.crop((2 * trim_x), 0.0, 1.0, 1.0)
    else:
      image.crop(trim_x, 0.0, 1 - trim_x, 1.0)

  return image.execute_transforms()

How can I make all images of different height and width the same via CSS?

Updated answer (No IE11 support)

img {    float: left;    width:  100px;    height: 100px;    object-fit: cover;}

<img src="http://i.imgur.com/tI5jq2c.jpg"><img src="http://i.imgur.com/37w80TG.jpg"><img src="http://i.imgur.com/B1MCOtx.jpg">

---

Related Topics