5

768px幅未満の画面サイズの画像をトリミングしようとしています。画像は左側と右側から均等にトリミングされます。

フルサイズの画像の例を次に示します（画像のサイズは幅900ピクセル、高さ250ピクセルです。：

これは、画面サイズが768p未満の幅になったら、私が作成しようとしているトリミングされたバージョンです。このバージョンでは、画像の幅は320ピクセルですが、768ピクセルでトリミングを開始する必要があります。

これまで私が使用してきたHTMLは次のとおりです。

<div class="container">
    <div class="image-container">
        <img src="http://i.imgur.com/H7cpsLK.jpg" />
    </div>
</div>

CSSは次のとおりです。

.container {
    width: 1280px;
    max-width: 100%;
    min-width: 768px;
}

.image-container {
    width:100%;
}

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

@media only screen and (max-width:768px) {
    .image-container {max-width:768px; overflow:hidden;}
}

これは私がこれを作成するために使用しているフィドルです：http： //jsfiddle.net/QRLTd/

左右同時に画像を切り抜くことはできますか？

4

3 に答える 3

3

LIVE DEMO

HTML：

<div class="container">
    <div class="image-container"></div>
</div>

CSS：

.container {
    width: 100%;
    height:200px;
}

.image-container {
    position:relative;
    margin:0 auto;
    background:url(http://i.imgur.com/H7cpsLK.jpg) no-repeat center center;
    background-size:cover;
    max-width:768px;
    width:100%;
    height:100%;
}
于 2013-03-25T16:30:26.203 に答える
1

より高いz-index値を使用して、常にいくつかのdivを左右に絶対位置にすることができます。

私はこれまでcssを介して画像をトリミングしたことはありませんが、ペイントまたはフォトショップで画像をトリミングし、両方の画像をアップロードしてから、表示する画像をcssと交換し、メディアクエリを利用することもできます。

于 2013-03-25T16:30:15.890 に答える
1

アートディレクション（選択的なトリミング/スケーリング）を使用したレスポンシブ画像は、注意が必要な領域です。幸いなことに、あなたは少し簡単な中心に向かってトリミングしようとしています。Rokoのソリューションはcssに適しているようですが、フルサイズの画像を読み込んでいます（遅い）。

ページ速度をさらに最適化して向上させたい場合は、モバイルブラウザがデスクトップサイズ以下のRetinaディスプレイサイズの画像をダウンロードする必要がないように、さまざまなサイズの画像を読み込む必要があります。一般的な解決策は、メディアクエリブレークポイントとCSS3を使用してimg.srcを交換し、事前にトリミングされたバージョンの画像を準備することです。

または、 Pixtulateなどのサービスを使用して、訪問者ごとにこのクロップをオンザフライで実行することもできます。これにより、事前に設定された焦点を介して中心から外れてトリミングすることもでき、すべての訪問者の画面に対して画像のサイズが正しくなります。

于 2014-02-28T20:44:28.163 に答える