我需要始终使用CSS将随机大小的图像裁剪为正方形160x160.裁剪后图像应保持居中.
我的标记应该是:
<a href="#" class="cropper">
<img src="image" alt="description" />
</a>
Run Code Online (Sandbox Code Playgroud)
搜索在计算器上我找到了一些答案(如本),但他们不为情况下,你的图像可以是更大的工作水平(宽)或垂直(高).
具体而言,我需要能够呈现一个都像这样宽的图像和类似这样的高图像在正方形的形式,没有预先知道哪一个是呈横长方形或垂直矩形.它还应该支持已经平方的图像.
我经常使用此代码将div视图置于中心:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Run Code Online (Sandbox Code Playgroud)
它适用于Firefox,Internet Explorer和Chrome,但不适用于Safari.
在Safari Web浏览器中居中图像的解决方法是什么?