118

商品写真で構成されたイメージウォールを作ろうとしています。残念ながら、それらはすべて高さと幅が異なります。css を使用してすべての画像を同じサイズにするにはどうすればよいですか? できれば100×100。

高さと幅が100pxのdivを作成してから、それを埋める方法を考えていました。それを行う方法がわからない。

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

4

14 に答える 14

222

更新された回答 (IE11 サポートなし) 

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}
<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

元の答え 

.img {
    float: left;
    width:  100px;
    height: 100px;
    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>

于 2013-10-16T22:19:01.690 に答える
36

画像を過度に歪ませる場合、つまり比率を崩す場合は、それを入れてもいいですか?コンテナを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;
}

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

于 2013-10-17T07:05:50.467 に答える
2

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

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

この例では 100x100 ピクセルのボックスを想定していますが、サイズが柔軟でレスポンシブになると確信しています。

.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 を使用する必要がある場合があります。

于 2016-05-31T13:46:15.067 に答える
1 
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

画像のサイズを div と同じにし、それに応じてブートストラップ グリッドを使用して div のサイズを操作できます

于 2019-02-02T07:11:07.157 に答える
0

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

img {
  width:  100px;
  height: 100px;
}
于 2016-04-20T13:40:18.040 に答える
0

コードがなければ、これを支援することは困難ですが、ここにいくつかの実用的なアドバイスがあります。

あなたの「画像の壁」には、スタイルを与えるための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; }

ただし、画像が完全に正方形でない場合、この方法を使用すると画像が歪んでしまいます。

于 2013-10-16T22:32:49.263 に答える
0

画像サイズはdivの高さと幅に依存せず、

CSSでimg要素を使う

これがあなたを助けるcssコードです

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

divでサイズを設定したい場合

これを使って

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

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

于 2013-10-16T22:17:54.697 に答える