如何将CSS大小调整图标放在子img标记上方？ [英] How can I bring the CSS resize icon above a child img tag?

问题描述

在另一个问题的

Edge和IE don 't支持 CSS resize ，所以他们无法测试。我相信Opera使用与Chrome相同的引擎，所以它们都失败并不奇怪。但是，它的工作方式与您在Firefox中的预期一致。是否有修复Blink的问题？

解决方案

首先，我想到了 :: - webkit- resizer 伪元素，但经过进一步测试，我发现它只考虑 textarea 元素，而不是其他元素使用 > resize 属性。这是小提琴，显示了这种行为。

另外，请注意，即使在 textarea 元素中， :: - webkit-resizer 样式更改仅在达到一定的高度（非常小）。这也可以通过上面的提琴重现。

鉴于此，在我看来，修复这个bug的最佳选择是使用自定义JS resizer库。

纯粹的css解决方法是将 z-index 应用于子元素 img

  div {resize：both;溢出：隐藏;高度：400像素;宽度：400像素; border：1px solid black;} img {position：relative; z-index：-1;}  

< div> < img src =https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg/>< / div>

In my answer to another question I noticed the CSS resize handle icon of a parent div can be obfuscated by an img. In that answer it doesn't really matter, as background is more appropriate anyway and could be used instead.

However, let's say (for some bizarre reason) you wanted an img inside a resizeable div, how could you bring the icon above it?

I wasn't sure if it was just an optical illusion of some kind, so I used a colour wheel with a white centre to test it:

div{
  resize:both;
  overflow:hidden;
  height:400px;
  width:400px;
  border: 1px solid black;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg"/>
</div>

Here is a browser comparison:

Edge and IE don't support CSS resize so they couldn't be tested. I believe Opera uses the same Engine as Chrome so it's no surprise they both failed. However, it works as you would expect in Firefox. Is there a fix for Blink?

解决方案

At first, I thought about the ::-webkit-resizer pseudo element, but upon further testing, I found out that it only considers textarea elements, not other elements that uses the resize property. Here's a fiddle showing this behavior.

Also, notice that even on the textarea element, ::-webkit-resizer style changes only kick in after it reaches a certain height (Very very small). This is also reproducible through the fiddle above.

Given that, it seems to me that the best alternative to "fix" this bug is to use a custom JS resizer lib.

A (rather monkeypatchey) pure css workaround is to apply a negative z-index to the child img

div{
  resize:both;
  overflow:hidden;
  height:400px;
  width:400px;
  border: 1px solid black;
}

img {
  position: relative;
  z-index: -1;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg"/>
</div>

这篇关于如何将CSS大小调整图标放在子img标记上方？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！