幅と高さの画像の切り抜きとサイズ変更

Question

ほぼすべてのショップサイトで見ることができるように、記事プレビューを作成したいと考えています。

私の問題は、divタグ内の画像です。ページは応答性があります。つまり、divの幅と高さがパーセンテージ値なのはなぜですか。私の質問は今、どのように作物の中にイメージを作って中心に置くことができるのですか？ここで

私のコードです：

*{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.wrapper{ 
 
    width: 100%; 
 
} 
 

 
.articlePreview{ 
 
    display: inline-block; 
 
    
 
    width: 15%; 
 
    height: 15%; 
 
    
 
    max-width: 15%; 
 
    max-height: 15%; 
 
    
 
    margin: 1%; 
 
    padding: 1%; 
 
    
 
    background-color: orange; 
 
}

<div class="wrapper"> 
 
      <div class="articlePreview"> 
 
       <div class="imgPreview"> 
 
        <img class="img" src="http://lorempixel.com/500/200"/> 
 
       </div> 
 
       
 
       <a href="#">I'm a link</a> 
 
      </div> 
 
      
 
      <div class="articlePreview"> 
 
       <div class="imgPreview"> 
 
        <img class="img" src="http://lorempixel.com/200/500"/> 
 
       </div> 
 
       
 
       <a href="#">I'm a link</a> 
 
      </div> 
 
      
 
      <div class="articlePreview"> 
 
       <div class="imgPreview"> 
 
        <img class="img" src="http://lorempixel.com/100/100"/> 
 
       </div> 
 
       
 
       <a href="#">I'm a link</a> 
 
      </div> 
 
     </div>

Answer 1

あなたが表示ウィンドウのサイズに各画像を同じ高さの特派を与えることができます。例えば。あなたのCSSで10vhなど。このようにして、すべての画像はウィンドウのサイズに応じて同じ高さのままになります。 divに設定するクラスを使用していますが、イメージ自体は使用していません。あなたがイメージに追加されたクラスを使用する場合には、高さ、パディングを指定することができ、など。例えば

...

.img { 
    height: 10vh; 
    width: 10vh; 
} 

今、それらはすべて同じサイズです。それらが最初に正方形でない場合、画像を歪ませるでしょう。それは始めるのに良い場所です。

Answer 2

これは役立つはず

*{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
body, html 
 
{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
.wrapper{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.articlePreview{ 
 
    display: inline-block; 
 
    width: 15%; 
 
    height:15%; 
 
    
 
    max-width: 15%; 
 
    max-height:15%; 
 
    margin: 1%; 
 
    padding: 1%; 
 
    
 
    background-color: orange; 
 
} 
 
.imgPreview 
 
{ 
 
    width:100%; 
 
    height:80%; 
 
} 
 
.img 
 
{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.imgTitle 
 
{ 
 
    width:100%; 
 
    height:20%; 
 
    font-size: 2vmax; 
 
}

<div class="wrapper"> 
 
      <div class="articlePreview"> 
 
       <div class="imgPreview"> 
 
        <img class="img" src="http://lorempixel.com/500/200"/> 
 
       </div> 
 
       <div class="imgTitle"> 
 
        <a href="#">I'm a link</a> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="articlePreview"> 
 
       <div class="imgPreview"> 
 
        <img class="img" src="http://lorempixel.com/200/500"/> 
 
       </div> 
 
       <div class="imgTitle"> 
 
        <a href="#">I'm a link</a> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="articlePreview"> 
 
       <div class="imgPreview"> 
 
        <img class="img" src="http://lorempixel.com/100/100"/> 
 
       </div> 
 
       <div class="imgTitle"> 
 
        <a href="#">I'm a link</a> 
 
       </div> 
 
      </div> 
 
</div>