HTMLで4枚の画像を2 * 2に揃えるには？

-1

私は、以下の写真として表示される4つの画像を整列しようとしています。しかし、私は各行の後にスペースを取得しています。どうすれば削除できますか？HTMLで4枚の画像を2 * 2に揃えるには？

また、私はすべての4枚の画像を満たす途中で例の画像の小さなサムネイルを追加することができます方法はありますか？

これに加えて、画像にキャプションを追加しようとしています。現在、それらは画像の下に表示されます。画像に追加するにはどうしたらいいですか？

<!DOCTYPE html> 
<html> 
<body alink="ff0000" bgcolor="ffffff" link="0000ff" text="000000" vlink="800080"> 

<div> 
<div class="transbox" style="width: 50%; height=50%; float: left;"> 
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" width="100%" /> 
<div style="position: relative; top:50%; left:45%; width:200px; height:25px"> 
    <center> 
    <font color="Black" size="+2">Looking Into The Future</font> 
    </center> 
</div> 

<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" width="100%" /> 
<div style=" text-align: center; vertical-align: middle;"> 
    <center> 
    <font color="Black" size="+2">correct one</font> 
    </center> 
</div> 
</div> 
</div> 

<div> 
<div class="transbox" style="width: 50%; height=50%; float: right;"> 
<img src="https://s18.postimg.org/acomst9gp/image.jpg" width="100%" /> 
<div style="position: relative; top:50%; left:45%; width:200px; height:25px"> 
    <center> 
    <font color="Black" size="+2">Looking Into The Future</font> 
    </center> 
</div> 

<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" width="100%" /> 
<div style="position: relative; top:50%; left:45%; width:200px; height:25px"> 
    <center> 
    <font color="Black" size="+2">Looking Into The Future</font> 
    </center> 
</div> 
</div> 
</div> 




</div></body> 
</html>

JSFiddleリンク：

https://jsfiddle.net/8bL4qqr8/

出典

2016-09-15 Aaron Misquith

使用ヒーロー像を探していたものです。 – Owner

body{ 
 
    background-color:"ffffff"; 
 
} 
 

 
.img-grid{ 
 
    width: 50%; 
 
    float:left; 
 
    height:400px; 
 
} 
 

 
.img-grid img{ 
 
    width :100%; 
 
    height:400px; 
 
} 
 
.caption{ 
 
    display :none; 
 
} 
 

 
.img-grid:hover .caption{ 
 
    text-align: center; 
 
    display:block; 
 
    background: #000; 
 
    color: #fff; 
 
    font-size:16px; 
 
    font-weight: bold; 
 
    margin-top: -100px; 
 
    padding: 10px; 
 
}

<div class="transbox img-grid"> 
 
    <img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" /> 
 
    <div class="caption"> 
 
      <p>Looking Into The Future</p> 
 
    </div> 
 
</div> 
 
<div class="transbox img-grid"> 
 
    <img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" /> 
 
    <div class="caption"> 
 
      <p>Looking into the future</p> 
 
    </div> 
 
</div> 
 
<div class="transbox img-grid"> 
 
    <img src="https://s18.postimg.org/acomst9gp/image.jpg" /> 
 
    <div class="caption"> 
 
      <p>Looking Into The Future</p> 
 
    </div> 
 
</div> 
 
<div class="transbox img-grid"> 
 
    <img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" /> 
 
    <div class="caption"> 
 
      <p>Looking Into The Future</p> 
 
    </div> 
 
</div>

出典

2016-09-15 10:12:14 nmanikiran

は、あなたのHTMLでの非推奨のものをたくさん持っています。あなたの体にこのリンク、テキストのすべてを使用しないでください。それ以外の場合は<center>または<font>ではありません。私はフレックスボックスで望みのものを簡単に作りました。あなたのコードを少し修正しました。あなたはここにフレキシボックス用のブラウザのサポートを見つけることができます。このhttp://caniuse.com/#search=flexbox

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #FFFFFF; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
} 
 
.transbox { 
 
    position: relative; 
 
    flex: 1 0 50%; 
 
    width: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.transbox .thumbnail { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 75px; 
 
} 
 
.transbox:nth-of-type(1) .thumbnail { 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
.transbox:nth-of-type(2) .thumbnail { 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.transbox:nth-of-type(3) .thumbnail { 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.transbox:nth-of-type(4) .thumbnail { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.transbox img { 
 
    width: 100%; 
 
    height: 100%; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
.transbox .text { 
 
    position: absolute; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
}

<div class="wrapper"> 
 
    <div class="transbox"> 
 
    <img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" /> 
 
    <div class="thumbnail"> 
 
     <img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Looking Into The Future</p> 
 
    </div> 
 
    </div> 
 
    <div class="transbox"> 
 
    <img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" /> 
 
    <div class="thumbnail"> 
 
     <img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Looking into the future</p> 
 
    </div> 
 
    </div> 
 
    <div class="transbox"> 
 
    <img src="https://s18.postimg.org/acomst9gp/image.jpg" /> 
 
    <div class="thumbnail"> 
 
     <img src="https://s18.postimg.org/acomst9gp/image.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Looking Into The Future</p> 
 
    </div> 
 
    </div> 
 
    <div class="transbox"> 
 
    <img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" /> 
 
    <div class="thumbnail"> 
 
     <img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Looking Into The Future</p> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-09-15 10:25:44 thepio

私は四つの画像すべてのミーティングポイントでは必要ですが、サンプル画像自体はサムネイルではありません。私はまた、ホバリングでそれらの画像をズームしようとしていますが、バックグラウンドでズームします。私は '.grow {transition：all .2s ease-in-out; } ' ' .grow：hover {transform：scale（1.3）; } ';それでもフルスクリーンにはなりません。 –

多分、あなたの質問にもう一度欲しい振る舞いなどを含めるべきです。 – thepio

"老朽化した" < - これをもっと使い始める必要があります – j08691

希望は、あなたが画像の上にキャプションを追加するための

<!DOCTYPE html> 
<html > 
<head> 
<style type="text/css"> 
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

.item { 
    position: relative; 
    float: left; 
    border: 1px solid #333; 

    overflow: hidden; 
    width: 50%; 
    height: 50% 
} 
.item img { 
    max-width: 100%; 

    -moz-transition: all 0.3s; 
    -webkit-transition: all 0.3s; 
    transition: all 0.3s; 
} 
.item:hover img { 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 
h1 { 
    color: white; 
    margin: 0; 
    padding: 20px; 
} 
html, body { height: 100%; padding: 0; margin: 0; } 
</style> 
</head> 
<body> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<div class="grow" style=" width: 40%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" /> 
</div> 
</div> 

<div class="item"> 
    <img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/IT-1.jpg" alt="pepsi"> 

    <div class="item-overlay top"></div> 
</div> 
<div class="item"> 
    <img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/RealEstate1.jpg" alt="pepsi" > 

    <div class="item-overlay top"></div> 
</div> 
<div class="item"> 
    <img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/VentureCapital-1.jpg" alt="pepsi" > 

    <div class="item-overlay top"></div> 
</div> 
<div class="item"> 
    <img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/Construction-1.jpg" alt="pepsi" > 

    <div class="item-overlay top"></div> 
</div> 

<div style=" width: 20%; position: fixed; top: 25%; left: 25%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<h1 id="text"> 
    Construction/Interior Design - Build to Live 
    </h1> 
</div> 
</div> 

<div style=" width: 20%; position: fixed; top: 25%; left: 75%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<h1 id="text"> 
    Real Estate - Buy and Sell Potential Properties 
    </h1> 
</div> 
</div> 

<div style=" width: 20%; position: fixed; top: 75%; left: 25%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<h1 id="text"> 
    Information Technology - Handling Potential IT Projects 
    </h1> 
</div> 
</div> 

<div style=" width: 20%; position: fixed; top: 75%; left: 75%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<h1 id="text"> 
    Venture Capital - Finance for High Growth Potential 
    </h1> 
</div> 
</div> 

<div class="grow" style=" width: 20%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;"> 
<div> 
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" /> 
</div> 
</div> 
</body> 
</html>

出典

2016-09-15 19:16:57 VAR

HTMLで4枚の画像を2 * 2に揃えるには？

答えて

関連する問題