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

你应该可以这样做：

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

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

Answer 2

请注意，您将使用img html代码，在div和position:relative中制作图片overflow:hidden，并使用position:absolute制作图片和height:100%，width:auto（或width:100%和height:auto）。这样，图像将在父容器中被裁剪并保持其比率。

See this demo 并调整框架大小以查看图像的裁剪方式和尺寸。

Answer 3

＆＃34;我是否必须通过php裁剪图像...＆＃34;

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

因此，即使你有一种风格告诉图像永远不会超过100x100px，客户的浏览器也会加载完整尺寸的图像。

这可能需要很长时间＆＃34;如果它是一个巨大的图像（指文件大小）。

你可以使用非常好的类/库来获得一种舒适，轻松的图像播放方式。而且你的页面会快得多。

例如我最近发现：

http://wideimage.sourceforge.net/

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

html图像不适合图像包装

3 个答案: