Question

我的HTML：

<div class="wrapper">
    <img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/ef/1e/45/ef1e450945a5a7ff0c4b7776810d4f90.jpg" alt="my img" />
</div>
<div class="wrapper">
    <img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/0e/3b/85/0e3b858ffcfdbfa02b562c3dc7e3b5e1.jpg" alt="my img" />
</div>
<div class="wrapper">
    <img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/df/c7/88/dfc7889e5dd99ad0c45834b4e4675389.jpg" alt="my img" />
</div>

我的css：

.wrapper {
    margin: 0;
    padding: 0;
}
.scale-img {
    transform: scale(0.5);
    transform-origin: top left;
}

在我的页面中我有几个img，每个img的大小都不同，我不想为每个img设置css的大小，我只想将每个img缩放到原始大小的一半。但是包装div保留了img的原始大小，我不知道哪里出错了？

Answer 1

试试这个......为了更好地理解，我使用了虚拟图像。

＆＃13;

.wrapper {
    margin: 0;
    padding: 0;
    border: 1px solid #000;
    position:absolute;
}
.scale-img{
    width:100px;
    height:100px;
    position: relative;
}

＆＃13;

<div class="wrapper">
    <img class="scale-img" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="my img" />
</div>

＆＃13;

Answer 2

transform不影响父母的原因是“modifies the coordinate space of the CSS visual formatting model”。

所以实际上，这有点像这样：

#container {
  height:200px;
  width:200px;
  border:1px solid;
  position:relative;
}
#container span {
  background:red;
  position:absolute;
  top:50px;
  left:50px;
  right:50px;
  bottom:50px;
}

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

为了解决您的问题，您可能需要一些JavaScript：

var objScaleIMGs = document.querySelectorAll('img.scale-img') // Grab all the images that need scaling.
for (var i = 0; i < objScaleIMGs.length; i++) { // Loop through all the images, setting their dimensions half of what they currently are.
  var h = objScaleIMGs[i].height;
  var w = objScaleIMGs[i].width;
  objScaleIMGs[i].height = h / 2;
  objScaleIMGs[i].width = w / 2;
}

.wrapper {
  margin: 0;
  padding: 0;
  border: 1px solid;
  float: left;
}
.scale-img {
  float: left;
}

<div class="wrapper">
  <img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/ef/1e/45/ef1e450945a5a7ff0c4b7776810d4f90.jpg" alt="my img" />
</div>
<div class="wrapper">
  <img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/0e/3b/85/0e3b858ffcfdbfa02b562c3dc7e3b5e1.jpg" alt="my img" />
</div>
<div class="wrapper">
  <img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/df/c7/88/dfc7889e5dd99ad0c45834b4e4675389.jpg" alt="my img" />
</div>

Answer 3

如果要使用img原始大小的更改来更改div的大小，则应该转换包装器。原因是缩放用于img而不是用于包装div。

.wrapper {
  margin: 0;
  padding: 0;
  height: 960px;
  width: 540px;
}
.scale-img {
  height:100%;
  width:100%
}

您应该参考：CSS Transform with element resizing

我注意到的问题是，当元素缩放时，浏览器会改变其像素比例，而不是像素数量。元素较小但不会改变DOM中的实际像素大小。因此我不认为只存在CSS解决方案。

缩放图像错误

3 个答案: