イメージを水平にhtmlで整列

Question

私はhtmlページとcssを作成し、イメージを統合してイメージを水平方向に水平に整列させてから、イメージでページを埋めるようにします。 私はこのコードを試してみました：

<section class="main clearfix" style="display:inline;"> 
    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 

    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class="" alt=""> 

    </a> 
    </div> 

    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work3.jpg" class="" alt=""> 

    </a> 
    </div> 

    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work5.jpg" class="media" alt=""> 

    </a> 
    </div> 

    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work5.jpg" class="" alt=""> 

    </a> 
    </div> 

    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work6.jpg" class="" alt=""> 

    </a> 
    </div> 

    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work2.jpg" class=""> 

    </a> 
    </div> 

    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work3.jpg" class=""> 

    </a> 
    </div> 

    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 
    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 
    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 
    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 
    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 
    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 
    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 
    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 
    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 
    <div class="work"> 
    <a href="inner.html"> 
     <img src="img/work1.jpg" class=""> 

    </a> 
    </div> 

</section> 

ファイルCSS：私の問題は、これは私には空白なることです

：

.work { 
    display: inline; 
    float: auto; 
} 
.work img { 
    width: 10%; 
    height: 200px; 
    margin-left: -2px 
} 

を、それは私にこのような写真を示しその行に戻ってください。

Answer 1

だけ使用object-fit: coverあなたは、画像のサイズ比を懸念している場合は、flexが最善の解決策かもしれない、マーティンのソリューションの横に

をフレキシボックス

.main{ 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-between; 
} 

Answer 2

を使用するか、または、

imgにありますが、IEではサポートされていません。

背景画像にはbackground-size: cover;を使用しますが、の恐ろしいSEOソリューションです。

使用table displayと.work DIVでoverflow: hidden;を適用する、しかし、応答性のために恐ろしい。

イメージがウェブサイトのパフォーマンス、拡張子、サイズ、優れた製品の開発を意識する必要がある他のイメージ特性にどのように影響するかを理解するのに役立つ可能性があります。

画像の表示を考慮すると、この場合はflexが最適な解決策になります。