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

【问题标题】：Should I use the CSS transform property on the link element or its child the img element?我应该在链接元素或其子元素 img 上使用 CSS 转换属性吗？
【发布时间】：2018-04-13 04:52:53
【问题描述】：

我有一张图片包含在这样的链接中：

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

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

在<a> 元素或实际的<img> 元素上使用transform 属性是否有最佳实践？还是真的不重要？

【问题讨论】：

看起来你错过了元素上的结束引号和标签
我认为您的问题没有绝对的答案。这将取决于您的元素和应用于每个元素的样式（a 和 img）
如果您只是想调整图像的大小，并且它不是动态的，那么请使用编辑器并将新图像保存在您的服务器上。矢量缩放在技术上比以实际大小显示图像要慢。由于问题太宽泛而投票结束，因为有很多因素，我们不知道你在做什么，所以我们不知道你“应该”做什么。
@PHPglue 将通过网络加载一个全新的图像，这可能会慢得多。现代浏览器使用 GPU 进行转换，实际上速度非常快。
谁说有动态悬停，或者这里发生了什么动态？这不是问题。我不知道 OP 是否只想使用 transform 来缩放图像 onload。

标签： html css css-transitions transform css-transforms

【解决方案1】：

这取决于你想做什么。由于您在锚点上有边框，您将希望它与图像一起缩放。

否则，您可能希望在锚点内缩放图像，您可以在其中设置溢出：隐藏；因此图像会缩放，但不会显示在其容器之外 - 对图像产生缩放效果。

但一般来说，我会使用父节点作为锚点并将图像设置为对此做出响应。如果您在 CSS 中遵循自上而下的父子层次结构，您将拥有更多控制权。你也可以设置 will-change: transform;到元素

【讨论】：

【解决方案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>

【讨论】：