10

css と html のみを使用して、カバー画像hereのような画像を作成しようとしています。私はさまざまなことを試しましたが、これまでのところ何もうまくいきませんでした。

これは私のhtmlコードです:

<div id="container">
    <img id="image" src="...">
</div>

どの CSS コードを使用すればよいですか?

4

9 に答える 9

20

画像の幅を100%に設定すると、画像の高さが自動的に調整されます。

<img style="width:100%;" id="image" src="...">

カスタムCSSがある場合:

HTML:

<img id="image" src="...">

CSS:

#image
{
    width: 100%;
}

File -> View Sourceまた、次回、またはおそらくGoogleで行うことができます。

于 2013-12-24T16:06:08.007 に答える
6

同じ比率にしたい場合は、コンテナを作成して画像の一部を非表示にする必要があります。

.container{
  width:100%;
  height:60px;
  overflow:hidden;
}
.img {
  width:100%;
}
<div class="container">
  <img src="http://placehold.it/100x100" class="img" alt="Our Location" /> 
</div>

于 2016-11-07T09:55:04.097 に答える
3

これにはいくつかの方法があります。私は通常、クラスからそれを行います。

クラスから

.image
{
    width:100%;


}

このため、htmlは次のようになります。

<img class="image" src="images/image_name">

または、インライン スタイリングを使用してスタイルを設定する場合は、次のようにします。

<img style="width:100%; height:60px" id="image" src="images/image_name">

ただし、外部のスタイルシートから行うことをお勧めします。プロジェクトが大きくなるにつれて、html と css を別々のファイルで管理する方が全体が簡単であることがわかるからです。

于 2013-12-24T16:15:48.430 に答える
1

親要素の高さを設定し、幅を指定します。次に、「background-size: cover」というルールで背景画像を使用します

    .parent {
       background-image: url(../img/team/bgteam.jpg);
       background-repeat: no-repeat;
       background-position: center center;
       -webkit-background-size: cover;
       background-size: cover;
    }
于 2016-11-07T10:41:24.017 に答える
0

画像の比率を失いたくない場合は、気にせずに をheight:300px;使用してwidth:100%;ください。

画像が大きすぎる場合は、画像エディターを使用してトリミングする必要があります。

于 2013-12-24T16:18:05.543 に答える