2

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

4

5 回答 5

2

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

CSS

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

HTML

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

不过要小心图像分辨率，因为如果放大太多，质量会很差。

于 2013-08-15T09:11:28.137 回答
2

你有任何可以提供的代码吗？

试一试：

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>
于 2013-08-15T09:08:13.457 回答
1

您需要图像包装器中的图像 div。秘诀在于底部填充，它指定了 2:1 的比例。实验 ;）

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

#image { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
于 2013-08-15T09:07:54.467 回答
0

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() });

});

看看小提琴

于 2013-09-01T10:35:05.303 回答
0

看看下面的链接，它是一个关于图像拉伸的非常全面的实现：

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

在浏览器中打开页面源并转到 aspectratio.js 文件，其中只编写了一个函数，可以满足您的所有需求。

我希望它有帮助。

于 2013-08-15T09:24:33.463 回答