Question

我将如何缩放图像以使其保持相同的宽高比以适应div 100 px×100 px。但我想你可以说的另一个问题是我只想向上或向下缩放它以便它只填充那个高度和宽度。例如，如果我有51像素×51像素的图像，它会将其缩放到102像素×102像素。在那里，你可以看到它填充整个div，即使它必须溢出一点。我已经尝试了所有的最大宽度和类似的东西，如果答案是在jquery我需要一些解释，因为我不知道jquery.Thankyou提前

Answer 1

你有可以提供的代码吗？

试一试：

CSS：

#container {
  width: 102px;
  height: 102px;
  padding: 0;
  margin: 0;
  background: url(../images/your-image-goes-here.png) no-repeat 0 0;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

HTML：

<div id="container">
</div>

Answer 2

您可以将div的宽度和高度设置为精确的大小，将图像的宽度和高度设置为100％，例如。

<强> CSS

#container {
    width: 102px;
    height: 102px;
}
#image {
    width: 100%;
    height: 100%;
}

<强> HTML

<div id="container">
    <img id="image" src="random" />
</div>

请注意图像分辨率，因为如果它放大太多，质量就会很差。

Answer 3

你需要imagewrapper中的image div。秘密在填充底部，这是指定2：1的比例。实验;）

#imagewrapper {
    position: relative;
    padding-bottom: 50%;
    height: 0;
}

#image { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 4

查看以下链接，了解有关图像拉伸的非常全面的实现：

http://www.selbie.com/playground/aspectcorrect/aspectcorrect.htm

在浏览器中打开页面源并转到aspectratio.js文件，只需编写一个函数即可完成所需的一切。

我希望它有所帮助。

Answer 5

<强> HTML

<div class="frame">
  <!-- Image original size is 36x33 px -->
  <img src="http://www.clickworkforce.com/images/software/icon-jquery.jpg" alt="jQuery"/>
</div>

<强> CSS

.frame {
  width: 100px;
  height: 100px;
}

<强>的jQuery

$(function() {

  var frm    = $('.frame'),
      frmImg = $('.frame img');

  frmImg.css({ height: frm.innerHeight(), width: frm.innerWidth() });

});

查看Fiddle

图像缩放以填充div CSS

5 个答案: