web-dev-qa-db-ja.com

高さが固定された全幅画像

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

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

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

どのCSSコードを使用する必要がありますか？

htmlcssimagewidthcover
7
Simon

画像のwidthを100％に設定し、画像のheight自身を調整します：

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

カスタム[〜＃〜] css [〜＃〜]がある場合：

HTML：

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

CSS：

#image
{
    width: 100%;
}

また、File -> View Source次回、またはグーグル。

15
Cilan

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

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

画像を傷つけないようにするには、以下を使用する必要があります。

max-height: 200px;
width: auto;
3
Brane

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

クラスから

.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の個別のファイルを使用して全体を管理しやすくなることに気付くため、外部スタイルシートから実行することをお勧めします。

2
Orville Patterson

親要素の高さを設定し、その幅を指定します。次に、「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;
    }
1
Mark
<div id="container">
    <img style="width: 100%; height: 40%;" id="image" src="...">
</div>

これがあなたの目的に役立つことを願っています。

0
Palak Jain

画像の比率を失いたくない場合は、height:300px;そしてwidth:100%;。

画像が大きすぎる場合は、画像エディターを使用して切り抜く必要があります。

0
Martin42006