web-dev-qa-db-ja.com

CSSを使用して異なる高さと幅のすべての画像を同じにするにはどうすればよいですか？

製品の写真で構成される画像ウォールを作成しようとしています。残念ながら、それらはすべて異なる高さと幅です。 cssを使用してすべての画像を同じサイズにするにはどうすればよいですか？好ましくは100 x 100。

私は、高さと幅が100ピクセルのdivを実行することを考えていました。どうすればいいのかわかりません。

どうすればこれを達成できますか？

htmlcssimagecss3resize
58
ariel
.img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>
121
Simon Arnold

画像を過度に歪めた場合、つまり比率から外すと、正しく見えない場合があります-少しでも問題ありませんが、これを行う1つの方法は画像を「コンテナ」に入れることですコンテナを100 x 100に設定し、画像をオーバーフローなしに設定し、最小幅をコンテナの最大幅に設定すると、画像の一部が切り取られますが、

例えば

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="iPod.jpg" alt="iPod" />
    </li>
</ul>



.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

このように、画像はコンテナのサイズのままですが、制約を壊すことなくサイズを変更します

27
Andi Wilkinson

最も簡単な方法-これは、画像サイズをそのまま維持し、他の領域をスペースで埋めます。この方法では、画像サイズに関係なく、すべての画像が引き伸ばさずに指定された同じスペースを取ります。

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}
20
Manoj Selvin

object-fit プロパティを使用して、img要素のサイズを変更できます。

  • coverは、コンテナに合わせて画像を比例的に伸縮します。画像は、必要に応じて水平方向または垂直方向にトリミングされます。
  • containは、コンテナ内に収まるように画像を比例的に伸縮します。
  • scale-downは、コンテナ内に収まるように画像を比例的に縮小します。
.example {
  margin: 1em 0;
  text-align: center;
}

.example img {
  width: 30vw;
  height: 30vw;
}

.example-cover img {
  object-fit: cover;
}

.example-contain img {
  object-fit: contain;
}
<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

上記の例では、赤は横長、緑は縦長、青は正方形の画像です。市松模様は16x16pxの正方形で構成されています。

9
Salman A

Bootstrapを使用し、応答性を失いたくない場合は、コンテナの幅を設定しないでください。次のコードは、gillytech投稿に基づいています。

index.hmtl

<div id="image_preview" class="row">  
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6" 
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

style.css

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

またはstyle.css

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}
3
Sven Ya

次の方法で実行できます。

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}
2
Arun ks

CSSファイルで高さと幅のパラメーターを設定する

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}
1
Ema

ロゴのリストを作成するために、この同じ問題の解決策を探していました。

古いブラウザのことを心配していないので、私にとっては少し便利なフレックスボックスを使用するこのソリューションを思いつきました。

この例では、100x100pxのボックスを想定していますが、サイズは柔軟/応答性があると確信しています。

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

ps .:いくつかのプレフィックスを追加するか、autoprefixerを使用する必要がある場合があります。

0
rafaelbiten

コードがなければ、これを支援するのは困難ですが、実際的なアドバイスを次に示します。

あなたの「イメージウォール」には、スタイルを与えるためのidまたはクラスを持つコンテナのようなものがあると思います。

例えば：

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

コードを上記と同様に設定すれば、ロゴなどのその他の画像に影響を与えずに、画像ウォールのすべての画像のサイズをスタイリングできます。

#imagewall img {
  width: 100px;
  height: 100px; }

しかし、画像が完全に正方形ではない場合、この方法を使用して画像が歪んでしまいます。

0
fredsbend

画像サイズはdivの高さと幅に依存しません。

cSSでimg要素を使用

ここにあなたを助けるCSSコードがあります

div img{
         width: 100px;
         height:100px;
 }

divでサイズを設定する場合

これを使って

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

このコードにより、画像は元のサイズで表示されますが、最初の100x100pxのオーバーフローは表示されません

0
asad raza

Andi Wilkinson's answer （2番目）に基づいて、少し改善し、画像の中心が表示されることを確認しました（受け入れられた回答のように）：

HTML：

<div class="crop">
   <img src="img.png">
</div>

CSS：

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}
0
Alexee

CSSファイルに移動し、次のようにすべての画像のサイズを変更します

img {
  width:  100px;
  height: 100px;
}
0
bakslash
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

画像サイズをdivと同じにし、bootstrap gridを使用してdivサイズを適宜操作できます

0
Manav Kothari