Question

我的网站上的一些图片有点问题。我有一个280x310 div容器，但我的所有图像都比这个容器大。我想保持图像的纵横比，并使它们适合div的整个高度，在左右两侧裁剪图像的任何多余部分（保持图像居中）。这可能在CSS吗？谢谢你的帮助。

Answer 1

将图像作为div的背景图像放置并使用background-size：contains（查看所有图像）或background-size：cover（缩放和裁剪）

查看Set size on background image with CSS?

Answer 2

这可以通过一点点jQuery来实现：

通过将overflow:hidden设置为包含图像的div，并将height:100%设置为图像，将调整其大小以填充div的高度，而不会失真。然后我们使用jQuery将图像置于position:absolute。

（http://jsfiddle.net/kK4ZV/）

HTML：

<div class="container">
   <img src="http://placehold.it/350x150">
</div>

<div class="container2">
    <img src="http://placehold.it/350x150" class="imageid">
</div>

<div class="container2">
    <img src="http://placehold.it/600x300" class="imageid">
</div>

CSS：

.container {
    border:1px solid red;
    width: 280px;
    height:310px;
}
.container2 {
    border:1px solid blue;
    width: 280px;
    height:310px;
    overflow: hidden;
    position:relative;
}
.container2 img {
    height:100%;
}
.js-fix {
  position:absolute;
  top:0;
 left:50%;
}

jQuery的：

$(".imageid").each(function(){
  var hWide = ($(this).width())/2; //half the image's width
  hWide = '-' + hWide + 'px';
  $(this).addClass("js-fix").css({
    "margin-left" : hWide,
  });
});

（从here借来的jQuery代码）

Answer 3

position: fixed; 
x-overflow: hidden;
max-width: 100%

Answer 4

您可以使用html ：

执行此操作

<img src='image.jpg' alt='Image' width='240' height='310'/>

您可以在http://www.w3schools.com/tags/att_img_height.asp

查看更多内容

此外，使用css ，您可以为图片本身创建一个类或ID：

img.sized{
    height:310px;
    width:210px;
    }

然后使用img标记中的类：

<img src='image.jpg' class='sized'/>

您可以在http://www.w3schools.com/css/css_dimension.asp

上阅读有关CSS大小调整的更多信息

Answer 5

将此添加到您的CSS代码

.imgfit { width: 250px; height:500px; object-fit: cover}

Object-fit将为您完成这项工作。

将图像裁剪为<div> </div>的大小

5 个答案: