Question

我想在tumblr上制作相同方形尺寸300X300px的图像，但保持相同的宽高比（裁剪不拉伸）。使用max-width和max-height时，它只会拉伸它们，当它在auto上时，它只适合2中的一个并保持矩形。是否有一种方法可以调整尺寸并裁剪以适应300x300的方形而不会失真？

Answer 1

如果你有能力添加css那么

.image-container-div {
  background-image: url("image-url");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Answer 2

即使您正在处理动态内容，您仍然可以通过在HTML中设置背景图像来通过CSS来操作它们

CSS：

.square-img {
    background: no-repeat center center;
    background-size: cover;
    width: 300px;
    height: 400px;
}

HTML：

{block:Photo}
<div class="square-img" style="background-image:url('{PhotoURL-400}')"></div>
{/block:Photo}

Tumblr图像调整大小/裁剪以适应

2 个答案: