1

かなり困った状況です… 全部説明するよりも、作ったものを見せて何が問題なのかを伝えるのが一番だと思います。

私はかなり長い間解決策を探してきましたが、見つけることができません。

http://jsfiddle.net/bd3Ms/にアクセスすると、h1 タグと画像が入った 3 つのボックスが表示されます。CSS で画像をクリップしました (これはこの方法で行う必要があり、それを回避することはできません)。画像をボックスの中央に配置しようとしていますが、うまくいきません。これは img 要素の絶対配置によるものだと思います。

コード：

<html>
<head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">

    <style type="text/css">
        .photo-div {
            overflow:auto;
            height:250px;
            border: 1px solid #000;
        }

        .photo-div-content {
            width:100%;
            margin:0 auto;
        }

        img.clipped {
            position:absolute;
            clip:rect(0px,200px,200px,0px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div id="div-1" class="photo-div span4">
                <div class="photo-div-content">
                    <h1>Logitech Mouse</h1>
                    <img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png">
                </div>
            </div>
                <div id="div-2" class="photo-div span4">
                <div class="photo-div-content">
                    <h1>Logitech Mouse</h1>
                    <img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png">
                </div>
            </div>
            <div id="div-3" class="photo-div span4">
                <div class="photo-div-content">
                    <h1>Logitech Mouse</h1>
                    <img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png">
                </div>
            </div>
        </div>
    </div>
</body>

私は Twitter Bootstrap を使用しており、私が構築している Web サイトは完全にレスポンシブになるため、margin-left を追加するだけではうまくいきません..

問題が何であるかを明確にすることができたと思います。

助けてくれてありがとう！

4

4 に答える 4

1

画像を切り取って中央に配置しないのはどうですか？

img.clipped {
    background:url(https://www.google.nl/images/srpr/logo3w.png) center center no-repeat;
}

実例：http： //jsfiddle.net/bd3Ms/1/

ここでより多くの選択肢：

于 2013-02-21T20:06:19.317 に答える
1

CSS スプライトに使用するのと同じ手法でそれを行いました。

.photo-div-content{
    background: 'url('IMG URL') repeat scroll -0px -0px transparent');
    height: 200px;
    width: 200px;
    margin: 0 auto;
}

今のところ、これが私の目標を達成するための最良の方法だと思います: CSS を使用して、div の途中で画像の一部を表示します。

于 2013-02-21T22:05:15.077 に答える
1

あなたの質問を正しく理解できれば、テキストとクリップされた画像の両方を中央に配置する必要があります。これが役立つかどうかを確認してください：http://jsfiddle.net/panchroma/7Lq6B/

重要な点は、クリッピング ディメンションと同じサイズの中央の div で画像をラップしたことです。

CSS 

.img-wrap{ /* dimensions should match clipping size */
width:200px;
height:200px;
margin:0 auto;
}

HTML

<div id="div-2" class="photo-div span4">
<div class="photo-div-content">
<h1>Logitech Mouse</h1>
<div class="img-wrap">
<img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png"></div>
</div>
</div>

幸運を！

于 2013-02-21T20:45:36.473 に答える
1

画像が完全に配置されているため、より多くのオプションを使用できます。これを試して：

img.clipped {
    position: absolute;
    left: 50%;
    margin-left: -25%;
    clip:rect(0px,200px,200px,0px);
}

きれいなコードではありませんが、親 div の途中にあります。

于 2013-02-21T20:59:05.030 に答える