php - 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/

超甜的东西。支持链接和东西。