Question

我的图像包含在这样的链接中：

<a href="#"><img src="/something.jpg></a>

我想使用CSS转换将其缩放为1.5倍。

是否有最佳做法在<a>元素或实际的<img>元素上使用transform属性？或者它真的没关系？

Answer 1

这取决于你想做什么。由于您在锚点上有边框，因此您需要使用图像进行缩放。

否则你可能想要在你的锚点内缩放图像，你可以设置溢出：隐藏;所以图像会缩放，但不会在其容器外显示 - 对图像产生缩放效果。

但总的来说，我会使用父节点锚点并设置图像以响应此情况。如果您遵循css中自上而下的父级到子级层次结构，您将获得更多控制权。您还可以设置will-change：transform;到元素

Answer 2

我会选择a标记，因为如果您的a标记有一些额外的样式，就像边框一样，它就不适合。见下面的例子：

a{
  border: solid 3px green;
  display: inline-block;
  padding: 4px;
}

img{
  display: block;
  width: 150px;
  height: auto;
}

.scale{
  transform-origin: 0 0;
  transform: scale(1.2,1.2);
}

<a class="scale" href="#">
  <img src="https://www.w3schools.com/howto/img_fjords.jpg">
</a>

<br><br><br>

<a href="#">
  <img class="scale" src="https://www.w3schools.com/howto/img_fjords.jpg">
</a>

我应该在链接元素或其子元素img元素上使用CSS转换属性吗？

2 个答案: