Question

我目前正在开发CMS，想知道哪种方式更适合图像的渲染功能（内容）：

当我想裁剪图像时，我的惯常方式如下：在PHP中计算并执行裁剪并缓存裁剪后的图像。然后简单地用图像元素渲染它。

现在我认为可能有更好的方法：只需渲染一个div，例如准确的高度（宽度可能是100％或固定）并将图像设置为background-image background-size: cover;使用background-position可以调整裁剪区域。

由于您不应将内容图像显示为背景图像的规则，我已采取以下措施：

我在div中渲染图像，但它完全透明，并且div上有overflow: hidden;。所以你可以，例如右键单击保存图像。

对我来说，使用它的主要原因如下：它完全具有代表性：您可以随时更改大小和宽高比，background-size: cover;将始终使其看起来不错（除非您使用任何奇怪的格式）。因此，在桌面上，您可以拥有一个200x200px的盒子，而在另一台设备上，您可以将其更改为200x100px而不会出现任何问题。您为所有设备使用相同的图像。没有缓存不同的作物（可能只是缩小网页大小以上的任何图像）。

这可能是这样的：

＆＃13;

.background-image {
    background-image: url(https://placeimg.com/1000/500/nature);
    background-size: cover;
	background-position: center center;
	overflow: hidden;
	margin-bottom: 25px;
}

.background-image img {
	opacity: 0;
}

.size-a {
	width: 200px;
	height: 100px;
}

.size-b {
	width: 200px;
	height: 200px;
}

.size-c {
	width: 200px;
	height: 800px;
}

.size-d {
	width: 800px;
	height: 200px;
}

＆＃13;

<div class="background-image size-a">
	<img src="https://placeimg.com/1000/500/nature">
</div>
<div class="background-image size-b">
	<img src="https://placeimg.com/1000/500/nature">
</div>
<div class="background-image size-c">
	<img src="https://placeimg.com/1000/500/nature">
</div>
<div class="background-image size-d">
	<img src="https://placeimg.com/1000/500/nature">
</div>

＆＃13;

HERE 作为示例

您如何看待这种方法？有什么好处，有什么缺点？你有其他解决方案吗？

Answer 1

我投票支持PHP方式，一旦裁剪它很容易放置它，但更重要的是下载速度。使用CSS，您可以下载整个图像，而不仅仅是定位和/或调整大小。

html / css - 将内容图像显示为背景图像

1 个答案: