web-dev-qa-db-ja.com

CSSで画像をトリミング

2列の画像グリッドを作成しました。これは、すべての風景画像で正常に機能します： Link 。ただし、レイアウトが崩れるような縦長の画像を追加したので、高さを他の高さに合わせるために画像を「トリミング」できるようにしたいと考えています。 マイナスのマージンを使用してみました 、しかしそれは効果がありませんでした：

.portrait-crop
{
    overflow: hidden;
}

img.portrait-crop
{
    margin-bottom: -30px;
}

何が悪いのかわかりません。任意の助けいただければ幸いです。

参考までに、 これは私のコードです です。

htmlcssimagecrop
8
Mario Parra

また、コンテナに高さを設定する必要があります。そうでない場合、コンテナの内部がどの程度表示されるかわかりません。

このようなものを試すことができます。

.portrait-crop{
    display: inline-block;
    height: 215px;
    width: 50%;
    overflow: hidden;
}



.portrait-crop img{
    width: 100%;
}
9
jorgeromero

次のようにimgsをトリミングできます：

CSS：

.crop-container {
    width: 200px;
    height: 300px;
    overflow: hidden;
}
.crop-container img {
    margin-top: -100px;
    margin-left: -200px;
}

コンテナのheightとwidthを調整して、トリミングされたimgのサイズを調整し、マイナスのmargin-topとmargin-leftの量を調整しますimg要素自体を使用して、画像のトリミングする部分を選択します。

HTML：

<div class="crop-container">
    <img src="some-img"/>
</div>

Working Fiddle

enter image description here

EDIT：高さが固定された行を持つ2列グリッドの代替ソリューション：

CSS：

body {
    margin: 0;
}
div.img {
    float: left;
    width: 49%;
    margin: 0.5%;
    height: 100%;
    background-size: cover!important;
    background-repeat: no-repeat!important;
}
div.row {
    height: 300px;
}

HTML：

<div class='row'>
    <div class='img' style='background: url("some-image");'>&nbsp;</div>
    <div class='img' style='background: url("some-other-image");'>&nbsp;</div>
</div>
<div class='row'>
    <div class='img' style='background: url("foo-image");'>&nbsp;</div>
    <div class='img' style='background: url("bar-image");'>&nbsp;</div>
</div>

Working Fiddle

12
nettux

何が悪いのかわかりません。任意の助けいただければ幸いです。

あなたの問題はCSSセレクターにあります。

img.portrait-crop
{
    margin-bottom: -30px;
}

画像をportrait-cropクラスと一致させます。

しかしこれは

.portrait-crop img
{
    margin-bottom: -30px;
}

Protrait-cropコンテナー内の画像に一致します。

1
rnrneverdies

CSS3を使用して、追加のコンテナーなしで単一のdivでこれを非常にエレガントに処理できます。

_.portrait-crop {
    width: 300px;
    height: 100px;
    background-size: cover;
    background-position: center;
}_
<div class="portrait-crop" style="background: url(https://www.google.ca/images/srpr/logo11w.png);"></div>
0
Kraang Prime

このCSSはどうですか：

img { height: 280px; }
.portrait-crop { height: 560px; }

http://jsfiddle.net/91z2wxfy/2/

0
Daniel Stanley

これを試してみてください。幅と高さを固定したオーバーフローでダイビングのimgタグを囲み、その向きに応じて幅または高さを適用しますこれを試してください

    .overflow{
      overflow: hidden;
      width: 400px;
      height: 271px;   
     }

    .overflow img{
       overflow: hidden;
       width: 400px;
    }

http://jsfiddle.net/91z2wxfy/9/

0
AJTECH

HTMLコードに影響を与えずにCSSのみを使用する1つの可能な解決策はこれです：

/* Fix for portrait */
.portrait-crop {
     width:50%;
     overflow:hidden;
     height:179px;
     display:inline-block;
 }
 .portrait-crop img {
       width:100%;
       height:auto;
 }

または、いくつかのdivを追加します（より良いソリューション）： http://jsfiddle.net/yoyb9jn7/

0
Monte

私、ここにa 完全な投稿How top top images

0
Elad Shechter