Should I use the CSS transform property on the link element or its child the img element?

Question

I have an image wrapped in a link like this:

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

And I want to use the CSS transform to scale it to be 1.5x itself.

Is there a best practice to use the transform property on the <a> element or the actual <img> element? Or does it really not matter?

Looks like you've missed the closing quote and tag on the element — giolliano sulit, Oct 31 '17 at 22:25
i think there is no absolute anwser for your question. It will depend on your element and the style applied to each one (a and img) — Temani Afif, Oct 31 '17 at 22:29
If you're just trying to resize an image, and it's not dynamic, then use an editor and save the new image on your Server. Vector scaling is technologically slower than having an image appear at its actual size. Voted to close base on the question being too broad, since there are so many factors, and we don't know exactly what you're doing, so we don't know what you "should" do. — StackSlave, Oct 31 '17 at 22:54
@PHPglue that would load a whole new image over network, which might be much slower. Modern browsers use GPUs for transforms, and it's actually pretty fast. — helb, Oct 31 '17 at 22:59
Who said there was a dynamic hover, or anything dynamic going on here? It's not in the question. I don't know if OP just wants to use transform just to scale the image onload. — StackSlave, Oct 31 '17 at 23:01
Ah, right, sorry. I probably just somehow assumed it will be used for a:hover, people tend to do that. — helb, Oct 31 '17 at 23:06

score 0 · Answer 1 · answered Nov 02 '17 at 03:52

It depends on what you want to do. As you have border on the anchor you will want this to scale with the image.

Otherwise you may want to scale the image within your anchor, where you could set the overflow:hidden; so the image will scale, but not show outside its container - giving a zoom effect on the image.

But in general I would use the parent node the anchor and set the image to be responsive to this. You will have more control if you follow the top down,parent to child hierarchy in your css. You can also set the will-change: transform; to the element

score -1 · Answer 2 · answered Oct 31 '17 at 22:58

I would go for the a tag, because if your a tag has some additional styling like a border, it wont fit. See example below:

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>

Should I use the CSS transform property on the link element or its child the img element?

2 Answers2