不适合于图像包装的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给定的值。

因此，即使您有一种样式告诉图像将永远不会超过100x100px，客户端的浏览器也会加载完整大小的图像。

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

有相当不错的类/库，您可以使用PHP获得一个舒适和简单的方式来玩图像。然后你的页面会更快。

例如，我最近发现：

http://wideimage.sourceforge.net/

超甜蜜的东西。支持链子之类的东西。

Answer 2

你应该能够做到这一点：

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

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

Answer 3

考虑到您将使用img html标记，将图像包装为position:relative和overflow:hidden，并将图像包装为position:absolute和height:100%、width:auto (或width:100%和height:auto)。这样，图像将被裁剪在父容器中并保持其比率。

请参阅此演示并调整帧的大小，以查看图像是如何在不同维度中被裁剪和调整大小的。