HTML 图像不适合图像包装器

Question

我需要将图像放入包装器中并裁剪。

<div class="box desktop-3 tablet-3 tablet-ls-3 mobile-3">
<div class="inner-box fullbox">
<a href='#module'>
<div class="image-wrap" >
<img src="../img/placeholder.png" />
</div>
</a>
</div>
</div>

.css

.box {
width: 282px;
min-height: 282px;
padding: 10px;
float: left;
}
.inner-box {
width: 100%;
min-height: 282px;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
padding: 20px;
}
.fullbox {
padding: 0px;
}
.image-wrap {
...
}

我试图将图像作为背景，如下所示，但这对我不起作用。我想从图像中有一个适合box的图像部分。

.image-warpper {
background-image: url(...);
background-repeat: no-repeat;
background-size: contain;
}

我是否必须通过 php 裁剪图像，或者是否可以在 css 中缩放或裁剪它？

谢谢

Answer 1

"我必须通过 php 裁剪图像吗...">

根据图像文件大小，强烈建议使用PHP来实现此目的。 请记住，客户端浏览器将始终加载完整的图像以将其大小调整为 css 给定的值。

因此，即使您有一个样式告诉图像永远不会超过 100x100 像素，客户端的浏览器也会加载全尺寸图像。

如果它是一个巨大的图像(指文件大小)，这可能需要"很长的时间"。

有一些非常好的类/库可以与PHP一起使用，以获得一种舒适而简单的方式来处理图像。那时你的页面会快得多。

例如，我最近发现：

http://wideimage.sourceforge.net/

超级甜的东西。支持链接和其他东西。

Answer 2

你应该能够做到这一点：

.image-wrap img { max-width:100%; height:auto; }

这将约束和缩小图像，并根据父元素的宽度将其设置为100%宽。

Answer 3

请记住，您将使用imghtml 标记，使图像以position:relative和overflow:hidden换行div，图像以position:absolute和height:100%、width:auto(或width:100%和height:auto)换行。这样，图像将在父容器中被裁剪并保持其比率。

请参阅此演示并调整框架大小，以查看图像如何在各种维度上裁剪和调整大小。