相关疑难解决方法(0)

正如这里所讨论的,我试图在div中覆盖一个图像.只需这些简单的线条,我就可以通过background-image以下方式实现:

div{
    width: 172px;
    height: 172px;
    border-style: solid;
    background-image: url('../images/img1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

结果,图像在div中居中并且被调整大小以使其适合div的宽度或高度(取决于图像是否宽或者不同).现在我想在div中使用image标签获得相同的结果.

<div>
  <img src="images/img1.jpg"/>
</div>

有没有办法通过简单的CSS来解决这个问题？

我遇到过这个非常讨厌的问题.

将图像与变换对齐时,基于它的平移百分比会导致图像略微模糊.这只是百分比对齐

考虑一下这个css:

img {
  display: block;
  height: auto;
  max-width: 100%;
  transform: translate(1%,1%); 
}

尝试的解决方案:

1. translate3d修复
2. 透视修复
3. translateZ修复

也许有人有解决方案？

更新:Js Fiddle 我用图像更新了js小提琴,以便更好地看到差异.这在摄影中非常引人注目.

示例图片:

谢谢!