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

「php経由で画像をトリミングする必要がありますか...」

画像ファイルのサイズによっては、この目的で PHP を使用することを強くお勧めします。クライアントのブラウザは常に完全な画像をロードして、css で指定された値にサイズ変更することに注意してください。

そのため、画像が 100x100px を超えてはならないというスタイルを取得した場合でも、クライアントのブラウザーはフル サイズの画像を読み込みます。

巨大な画像の場合（ファイルサイズを参照）、「非常に長く」かかる可能性があります。

快適で簡単な方法で画像を操作するために、PHP で使用できる非常に優れたクラス/ライブラリがあります。そして、あなたのページははるかに速くなります。

たとえば、私は最近見つけました：

http://wideimage.sourceforge.net/

超甘いもの。連鎖などをサポートします。

于 2014-01-21T13:01:09.337 に答える
0

imghtml タグを使用することを念頭に置いて、画像をandで囲みdiv、画像をand , (またはand ) で囲みます。このようにして、画像は親コンテナーでトリミングされ、その比率が維持されます。position:relativeoverflow:hiddenposition:absoluteheight:100%width:autowidth:100%height:auto

このデモを参照し、フレームのサイズを変更して、画像がさまざまなサイズでトリミングおよびサイズ変更される様子を確認してください。

于 2014-01-21T12:53:22.033 に答える