CSS/Javascript图像大小适合裁剪和保持长宽比

I have a block that is of size 180x270 that I need to show images

我有一个大小为180x270的块，我需要它来显示图像

The image sizes can vary, and I want to make sure it expands or shrink so that the smaller border (either height or width) matches the block, whereas the larger border gets cropped while preserving aspect ratio.

图像大小可以变化，我要确保它展开或缩小，以便较小的边框(高或宽)与块匹配，而较大的边框在保留长宽比的同时被裁剪。

Examples are the following: - An image of 360x600 gets resized to 180x300, and I crop the height from 300 to 270 - An image of 100x135 gets resized to 200x270, and I crop the width from 200 to 180

示例如下:- 360x600的图像被调整为180x300，我将高度从300裁剪为270 - 100x135的图像被调整为200x270，宽度从200裁剪为180

Basically I want to make sure there's no white space as I expand/shrink the image while preserving aspect ratio by cropping the section exceeding the block

基本上，我想要确保没有空白，因为我在扩展/缩小图像的同时保留了宽高比。

Any suggestions on css or javascripts that can handle this?

对css或javascript有什么建议吗?

2 个解决方案

#1

Zach's solution is best if you can use a bg-image for the task, but if you need to use an <img> tag (there are cases when this is advised), then you need javascript to calculate the image's aspect-ratio and determine whether it is more squat or more vertically stretched than the target frame. Then there's a little CSS as well:

扎克的解决方案是最好的如果你能使用一个bg-image的任务,但是如果你需要使用一个< img >标记(在某些情况下,这是建议),那么你需要javascript来计算图像的纵横比和确定它是否蹲或多个垂直拉伸比目标框架。然后还有一个小CSS:

JavaScript

JavaScript

//obtain a dom-reference for the image using getElementById
//or by some other means depending on what you know of its HTML
var img = document.getElementById('some-image-id') 


var aspectRatio = img.clientWidth/img.clientHeight;

//if the img is more squat, set it's height equal to the target frame's height
if(aspectRatio > (270/180)){
    img.style.height = 180 //image is
}
//otherwise the image is more vertically stretched
// so set the img width equal to the target frame's width
else{
    img.style.width = 270;
}

This will set the

这将设置

CSS

CSS

Finally, to center an over-sized image inside a wrapper vertically and horizontally, regardless of how the fit was made:

最后，将一个过大的图像垂直和水平地居中于包装器中，而不管它是如何制作的:

.wrapper{
    position:relative;
    display:inline-block; 
}
.wrapper img{
    position:absolute;
    top:-9999px;
    right:-9999px;
    bottom:-9999px;
    left:-9999px;
}

#2

It seems like you're looking for background-size:cover, which works when the image is a background-image

看起来你是在寻找背景尺寸:cover，当图像是背景图像时，它可以工作

background:url(imgurl.jpg) /* Other background image properties */;
background-size:cover;

Demo

演示

#1