0

我需要将图像调整并裁剪到它的包装器中。

        <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 中缩放或裁剪它？

谢谢

4

3 回答 3

0

你应该能够做到这一点：

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

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

于 2014-01-21T12:47:56.597 回答
0

请记住，您将使用imghtml 标记，使图像包含div在position:relativeand中，overflow:hidden并使用position:absoluteand height:100%，width:auto（或width:100%and height:auto）。这样，图像将在父容器中被裁剪并保持其比例。

请参阅此演示并调整框架大小，以了解如何在各种尺寸下裁剪和调整图像大小。

于 2014-01-21T12:53:22.033 回答
0

“我是否必须通过 php 裁剪图像...”

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

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

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

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

例如我最近发现：

http://wideimage.sourceforge.net/

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

于 2014-01-21T13:01:09.337 回答