web-dev-qa-db-ja.com

画像のモザイクHTML / CSS

固定縦横比3:2でdiv内にportrait imagesを使用して画像レイアウトを作成したいと思います。画像のサイズは327x491pxです。

主な問題は、画像間の不要なスペースです。 HTML/CSSのみを使用して画像をモザイクとして配置するにはどうすればよいですか？

HTML：

<div id="pictures1" class="_pictures1 grid">
    <div class="_pictures1-01"><div style="width:125px;height: 188px; background: red;"><img src="" width="125" height="188" alt="" /></div></div>
    <div class="_pictures1-02"><div style="width:192px;height: 288px;background: green;"><img src="" width="192" height="288" alt="" /></div></div>
     ... SO ON ...
</div>

CSS：

._pictures1 {
    width: 935px; height: 490px;
    margin: -26px 0 0 59px;
    float: left;
    top: 20%; left: 20%;
    position: absolute;
    border: 1px gray solid;
}
._pictures1 div {position: absolute;}
._pictures1-01 {top: 0px; left: 35px;}
._pictures1-02 {top: 200px; left: 0px;}
/* ... SO ON ... */

jsfiddle

htmlcssresponsive-designgrid-layoutaspect-ratio
18
Developer Desk

適切な答えを出すために、まず要件を明確にします。

  1. 画像はすべて同じアスペクト比です：3/2
  2. 画像をトリミングしないでください
  3. 画像間にスペースがない
  4. 画像のモザイクを作成する

あなたはあなたのイメージを表示するために何千もの可能性を持つことができます。簡単なレイアウトを作成して、独自のレイアウトを作成する方法を示します。

これはあなたが達成できることのFANCY FIDDLEであり、これは次のようになります。

Mosaic of images in html/css - example layout

最初のステップ：考え、計算し、もう一度考える

最初：簡単にするために、画像に3つのサイズがあるとします（計算を簡単にするために、画像サイズを1ピクセルずつ変更しました）。

  1. 大きい ： 328*492px
  2. ミディアム、ビッグの1/2：164*246px
  3. 小さい、大きいの1/4：82*123px

2番目：画像はすべて縦向きで、コンテナの高さは大きな画像と同じであるため、高さ492pxの縦棒で作業する必要があります3つの幅：

  1. 大きい ： 328pxワイド、すべてのサイズの画像を表示できます
  2. 中：328/2 = 164px広く、中小の画像を表示できます
  3. 小さい ： 327/4 = 82px広く、小さい画像しか表示できません

3番目：列の数と画像サイズは？これはあなた次第です。あなたはあなたのコンテナの全幅と表示したい画像の数に応じて選択をしなければなりません。

しかし、あなたのフィドルでは、コンテナ（._pictures1） があります 935px widthこれは、直前に選択された列幅では実現できません。

935/82 = 11.4024...

あなたが得ることができる最も近いものは82*12 = 984px幅広のコンテナ。

コンテナーの幅を変更するか、最初の幅に合わせて画像と列のサイズを変更する必要があります。

または（スポイラー）パーセンテージで作業できます。これは、レイアウトをレスポンシブにする必要がある場合に特に役立ちますが、これは複雑になり、私は物事をシンプルにしようとしています。

きっとあなたは好奇心旺盛でチェックしたいと思いますので、ここにレイアウト例を示します。

画像のレスポンシブモザイク

次のステップ：レイアウトを設計する

ペン、フォトショップ、または自分に合ったその他のツールを使用します。本当に上手い場合は、脳を使って思い通りのレイアウトをメンタルに表現することもできます。

解答のビギンに見える画像をデザインしました。

前に述べたように、レイアウトの可能性（列の数とそれらの列の画像のサイズ）はたくさんあるので、例では2つの大きな列と1つの中型の列と2つの小さな列を選択しました

328*2+164+82*2 = 984px ( = width of container so it can fit!)

最後のステップ：コーディングを開始します！

これで結果を見ることができます

[〜＃〜]フィドル[〜＃〜]

このレイアウトは floats に基づいているので、コンテナー、列、画像の幅、高さを定義して、それらがすべて互いにうまく隣り合うようにする必要があります（計算とデザイン、それは簡単です）。

CSS：

#wrap {
    width:984px;
    height:492px;
}
.big_col, .medium_col, .small_col{
    height:492px;
    float:left;
}
img {
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:328px;
}
.medium_col{
    width:164px;
}
.small_col{
    width:82px;
}
.big_img img {
    width:328px;
    height:493px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}

そしてHTMLマークアップ：

<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="http://www.lorempixum.com/327/491/abstract" alt="" />
            <img src="http://www.lorempixum.com/g/327/491" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        </div>
        <div class="medium_img">
            <img src="http://www.lorempixum.com/g/327/491/business" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
        <div class="small_img">
            <img src="http://www.lorempixum.com/g/327/491/food" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
            <img src="http://www.lorempixum.com/327/491/cats" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="http://www.lorempixum.com/327/491/nightlife" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="http://www.lorempixum.com/327/491/fashion" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
    </div>
</div>
32
web-tiki

どちらか一方の寸法を設定し、両方を設定しない場合、画像は滑らかにサイズ変更されます。幅だけをパーセント単位に設定してみてください。

4
tuespetre

まず、画像間のスペースを削除するには、「0」に設定されたpaddingとmarginを削除するだけです。

次に、あなたが望むものを達成するために、それらの戦略を使用または組み合わせることができます：

1）サイズの1つにピクセル単位の固定サイズを割り当てます。他のサイズは自動的に拡大縮小されます。

2）JavaScriptで必要なサイズを計算し、値を動的に割り当てることができます。たとえばjQueryフレームワークの場合：

$(img).each(function(){
 var h = this.height();
 var w = this.width();


 if (w => h){
  this.attr('width', w*0.66);
}
else {
  this.attr('height',h*.066);
}
});

3）必要に応じて、divsおよびbackground-size: coverまたはbackground-size: containにcss background-imageを静的または動的に使用できます（ w3c docs

2
MrPk

同じ位置と比率を動的に維持したい場合、絶対配置は最良の選択ではないようです。

ネイティブHTMLフローが通常の方法です。絶対配置は、ビタミンタブレットのようなものです。必要なときに使いますが、メインの食べ物ではありません。 ;）

私がすることは：

  1. コンテナーを必要に応じて（たとえば、中央に）配置し、その幅を、ウィンドウ/セクションのパーセンテージで幅を調整します。

  2. 次に、._ pictures1-xx divをその中に置き、コンテナのパーセンテージを使用して写真の幅のサイズを設定します。高さは比率を自動的に保ちます（*）

  3. 次に、._ pictures1-xx divに「インラインブロック」とフロート「左」を表示させます。次に、最後の写真の後に明確な「両方」の小さなdivを入れ、コンテナを閉じます。

（*）リマインダー：幅または高さのデフォルト値は「自動」です。つまり、もう一方がpx /％値の場合に画像の比率を維持する任意のサイズを意味します。写真の比率を維持するために、写真の高さが定義されると、水平マージンはネイティブで動的になります。幅を定義して高さを自動のままにすると、写真の比率を維持するために高さが動的になり、マージンは変わりません。

これがお役に立てば幸いです。

1
Alice Rocheman

簡単な解決策を提供したいと思います。

imgタグをDIVでラップするだけです。そして、このラップされたDIVにCSSを適用する必要があります。

コード例

<img src='some_image.jpg'>

<div class="img_wrapper">
     <img src='some_image.jpg'>
</div>


CSS

//  suggestion: target IMG with parent class / ID
.img_wrapper img{
    width: 100%; 
    height: auto;
}

クラス.img_wrapper内のすべての画像のアスペクト比は適切です。

1
Kushal Jayswal

私の経験では、どちらか高さまたは幅（両方ではない）の寸法のみを設定した場合、画像はそれに応じて拡大縮小されます。

0
M. R. Wilson

aspectRatioResizeImg
これは、アスペクト比を維持して画像をサイズ変更できるjQueryプラグインであり、コンテナに適合します。必要に応じて、画像のアスペクト比に合わせてコンテナのサイズを変更できます。
https://github.com/stereoactivo/jquery.resize-image-aspect-ratio

0
Amin Arab

このようなものを試してください

スタイリング

body{
    background: black;
    width:80%;
    margin:5em auto;
    display:block;
}
.wrapper{
    background:#FFF;
    float:left;
}   

.container{
    height:476px;
    width:192px;
    display:inline-block;
    float:left;
}
.small{
    height:188px;
    width:125px;
    display:block;
    margin:0 auto;
    background:#333;
}
.medium{
    background:#666;
    width:192px;
    height:288px;
}
.large{
    height:476px;
    width:200px;
    background:#999;
    display:inline-block;
    float:left;
}

これはHTMLです

<div class="wrapper">
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
        <div class="small">
            <div class="small_inner">
            </div>
        </div>  
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">

            <div class="medium_inner">
            </div>
        </div>
    </div>
</div>
0
Chintan Bhatt
img{
 height: auto;
 width: 50%
}
0
somethinghereplease1

画像をdivでラップします。比率に応じてdivの幅と高さを設定します。画像の高さのみを指定します。画像に必要なスペースだけを取りたい場合は、display：inlineも使用します

0
Asghar C