Question

设置一个CMS，我想自动限制上传的图像，不会扭曲或将图像设置为背景，因为我希望网站访问者能够复制图像。可以在css或javascript中完成吗？

<div class="outer">
    <img src="http://2.bp.blogspot.com/-CMIQjovvgcQ/VOy4zOpkW3I/AAAAAAAAAH4/8cE_5moqRFQ/s1600/happy%2Bholi%2Bphotos.jpg" width="100%"/>
    <h2>title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="outer">
    <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150218160918-stress-super-169.jpg" width="100%"/>
    <h2>title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="outer">
    <img src="http://i.telegraph.co.uk/multimedia/archive/02951/photoshopping-peg_2951334k.jpg" width="100%"/>
    <h2>title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

CSS

.outer{
    width:30%;
    float:left;
    margin-right:3%;
}

https://jsfiddle.net/tonytansley/9y09b4hh/是问题的粗略例子。

Answer 1

简而言之，目前实现此解决方案的唯一方法似乎是背景图片和背景尺寸：覆盖在预先设定的div上。

看起来很有希望（虽然不完全支持）如下......

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

和

<img class="center-cropped" src="http://placehold.it/200x200" />

但在此之前，背景图像是最好的（尽管不是SEO友好的）方式。

自动图像裁剪

1 个答案: