我對我網(wǎng)站上的一些圖片有一點小問題。我有一個280x310的div容器，但是我所有的圖片都比這個容器大。我想保持圖像的長寬比，并使它們適合div的整個高度，裁剪圖像左側(cè)和右側(cè)的任何多余部分(保持圖像居中)。這在CSS中可能嗎？謝謝你的幫助。

將此添加到您的css代碼中

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

Object-fit將為您完成這項工作。

將圖像作為div的背景圖像，并使用background-size: contain(查看整個圖像)或background-size: cover(縮放和裁剪)

用CSS檢查背景圖片的尺寸？

這可以通過一點jQuery來實現(xiàn):

通過將overflow:hidden設(shè)置為包含圖像的div，并將height:100%設(shè)置為圖像，它將被調(diào)整大小以填充div的高度，而不會失真。然后我們用jQuery將圖像居中，位置: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,
  });
});

(jQuery代碼借用于此)

您可以使用html來做到這一點:

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

你可以在http://www.w3schools.com/tags/att_img_height.asp看到更多

此外，使用css，您可以為圖像本身創(chuàng)建一個類或ID:

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

然后在img標簽中使用該類:

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

你可以在http://www.w3schools.com/css/css_dimension.asp上閱讀更多關(guān)于CSS尺寸的信息