Facebookで、サイズの画像を投稿すると、タイムライン上に完全に表示されます。彼らはどのようにこれを行うのですか？divの高さがその幅よりも大きい場合、画像をdivに固定するにはどうすればいいですか？
私は以下を試しました。
両方とも動作しませんでしたが、スタックオーバーフローはこれ以上のオプションがなく、最終的にこれを追加することになりました。
あなたの親divは風景と肖像写真の両方のためのアスペクト比を維持しながら、あなたはスケール画像にCSSを使用することができます固定寸法を持っている場合。
画像は常にdiv内に収まります。
.container {
width: 400px;
height: 400px;
text-align: center;
background: red;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}<h1>Landscape</h1>
<div class="container">
<img src="https://unsplash.it/1600/800">
</div>
<h1>Portrait</h1>
<div class="container blue">
<img src="https://unsplash.it/800/1600">
</div>この回答は多少OKです。 –
imgの場合、余白を追加する必要があります：divより小さい場合、画像を自動的に中央に配置するauto。 –
Facebookでは、画像を背景として表示しません。そこに画像がimgタグを使って表示されます。あなたがfacebookの高さを観察するなら、イメージはお互いに異なるかもしれませんが、幅は常に同じです。非常に長い画像を投稿しようとすると、あなたはその事を理解するでしょう。
ソリューション：
<div>
<img src="anysource">
</div>
<style>
div{width: 480px;}
div img{width: 100%; height: auto}
</style>
私はあなたがtechnique.Youは、画像を撮影しようと、それはすなわちスケール再それがJavaScriptのDOMやCSSと再を使用して、高さと幅です変更する必要がありますスケーリングを求めていると思いますそれをページにアップロードします。
画像が背景で表示されていないため、第1の解決策が機能しませんでした。
実際の<img>タグで使用されているCSSについてのすべての回答からAsides。
Facebookは、サイズ変更と圧縮を行うサーバーサイドスクリプトを通じてすべてのアップロードを実行します。
彼らはおそらくこれを行うための自社コードを持っていますが、同じサイズと高さの比率（サムネイルでは少なくとも）を維持するために、サイズ変更やアップロードのトリミングを含めてImagemagickを使って同じことを行うことができます。
いくつかの例をここで見つけることができます：純粋なCSSのオプションについてはhttp://php.net/manual/en/book.imagick.php
位置決め引数を利用しながら、あなたは、背景画像のプロパティを調べることができます。
ここにw3cschoolsから抜粋したスニペットがあります。
div {
Width:100px;
Height:100px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
すべての答えからAsides、Facebookはまた、サイズ変更と圧縮を行いますサーバー側のスクリプトを使用して、すべてのアップロードを実行します。彼らはおそらく、これを行うための自社コードを持っているかもしれませんが、あなたは、同じ幅と高さの比を常に維持するようにアップロードのサイズを決めることを含めて、同じことをするためにimagemagickを使うことができます（少なくともサムネイルでは）http://php.net /manual/en/book.imagick.php – Doug