web-dev-qa-db-ja.com

最小/最大の高さ/幅でアスペクト比を維持していますか？

私のサイトには、ユーザーが画像をアップロードできるギャラリーがあります。

高さを維持するdivに画像を配置したいのですが、画像の高さは500px以下にする必要があります。幅は、アスペクト比を維持するために自動である必要があります。

HTML：

<div id="gallery">
    <img src="uploads/my-dynamic-img.jpg">
</div>

私はこのCSSを試しました：

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        max-width: 100%;
    }
}

上記は適切に機能し、ギャラリーの高さは常に500pxで、画像の高さが500pxを超えることはありません。小さい画像で問題が発生しましたが、ユーザーが本当に小さい画像をアップロードした場合、最小200pxまで「膨らませ」たいと思います。これはmin-height画像の場合、この問題は、画像の高さが200px未満で幅が2000pxの場合、画像の高さが最大200pxに拡大されますが、画像の幅が広くなると縦横比が低下します。画像の親divよりも。

最小の高さでアスペクト比を維持するにはどうすればよいですか？

htmlcsssassaspect-ratio
21
panthro

あなたが探しているプロパティはobject-fit。これはOperaの革新の1つです。詳細については、 object-fitに関する2011年の開発記事 を参照してください（そうです、それはずっと昔からです）。数年前なら、私はあなたにそれを勧めることができなかったでしょうが、カニウスは他の誰もが追いついてきていることを示しています：

  • Opera 10.6-12.1（-o-プレフィックス）
  • Chrome 31以降
  • Opera 19以降
  • Safari 7.1以降
  • iOS 8以降
  • Android 4.4以降

http://caniuse.com/#search=object-fit

#gallery img {
    -o-object-fit: contain;
    object-fit: contain;
}

containの値を使用すると、画像のアスペクト比を維持します。

または、代わりにこれを使用することもできます。

#gallery img {
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
}

http://sassmeister.com/Gist/9b130efdae95bfa4338e

30
cimmanon

これを達成するために私が知っている唯一の方法は、widthまたはheightをautoに設定することです。

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        width: auto;
    }
}
4
EternalHour

実際、私は同じようなことをするつもりでした。あなたがそれに夢中なら、jQueryの何かがあります。

SCSS：

#gallery {
  height: 500px;

  img {
    max-height: 100%;
  }

  .small {
    width: 100%;
    max-width: 500px;
    height: auto;
  }

  .regular {
    width: auto;
    min-height: 200px;
  }
}

jQuery：

$( 'img' ).each( function() {

  var imageWidth = parseFloat( $( this ).css( 'width' ) );
  var imageHeight = parseFloat( $( this ).css( 'height' ) );

  if( imageHeight <= 200 && imageWidth >= 200 ) {
    $( this ).addClass( 'small' );
  }
  else {
    $( this ).addClass( 'regular' );
  }
});

CodePen

1
Dustin

CSSのみを使用してこれが可能かどうかはわかりません。

ただし、JavaScriptの数行で同じことを実現できる場合があります。

var img= document.querySelectorAll('img');
for(var i = 0 ; i < img.length ; i++) {
  img[i].onload= function() {
    var h= this.naturalHeight;
    h= Math.min(500,Math.max(200,h));
    this.style.height= h+'px';
  }
}

これにより、すべての画像の高さが200pxから500pxの間に設定されます。幅は自動的に調整されます。

var img= document.querySelectorAll('img');
for(var i = 0 ; i < img.length ; i++) {
  img[i].onload= function() {
    var h= this.naturalHeight;
    h= Math.min(500,Math.max(200,h));
  }
}
#gallery{
  height: 500px;
  width: 400px;
  overflow: hidden;
}
<div id="gallery">
  <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo-med.png">

</div>
1
Rick Hitchcock