2017-01-25 5 views
-3

私たちはウェブサイトを作っていたという学校プロジェクトがあります。私はイメージに「問題」があります。問題を説明するのは難しいですが、私は試してみます。ビデオをアップロードして、わかりやすくしました。私がしたいのは、画像を高さに合わせて拡大するときに画像の幅を拡大しないことです。ウィンドウの魔法使いをドラッグする瞬間、高さが変わると画像の幅が変わり、画像は本当に悪く見えます。このビデオを見て、自分のために見てください。ウェブサイトの画像ヘルプが必要

https://www.youtube.com/watch?v=9ybm9rlast0

私は絵がGmailのように仕事をしたいです。 ありがとうございます!

+2

ようこそStackOverflow、あなたの質問には、最小限の、完全で、検証可能な例、[here's how](http://stackoverflow.com/help/mcve)が含まれている必要があります。 ** – hungerstar

+0

画像の幅と高さを定義します。 '#logo {height:100px;幅:200px;オーバーフロー:隠された; } ' – grooveplex

+0

画像を反応させないCSSと背景のプロパティ – Claude

答えて

0

私はeasisestルートがバックグラウンド・サイズを使用することです言う:カバーを。あなたの問題のために。まず、選択したイメージをホストする要素を作成します。私の例ではdivを使用し、スタイリングの目的でidを与えました。

<body> 
    <div id="resize"></div> 
</body> 

は、次にヘッダータグ内に単純に次の行を追加します。

<head> 
    <style type="text/css"> 
     #resize{ 
      background-image: url("image-goes-here"); /*inject image here*/ 
      background-size: cover; 
      height: 500px; /*desired height size*/ 
      width: 50%; /*desired width size*/ 
     } 
    </style> 
</head> 

は、この情報がお役に立てば幸い!

+1

ありがとう!それは今働きます!ちょうど "バックグラウンド位置:中心;"を追加しなければならなかった – robeng

1

は、通常がどのように実装されているかの例です。

/* Typical responsive image CSS */ 
 
img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
.container { 
 
    width: 75%; 
 
} 
 
.left, 
 
.right { 
 
    float: left; 
 
} 
 
.left { 
 
    width: 40%; 
 
} 
 
.right { 
 
    width: 60%; 
 
}
<div class="container"> 
 
    
 
    <div class="left"> 
 
    <img src="http://placehold.it/600x300/fc0/"> 
 
    </div> 
 
    
 
    <div class="right"> 
 
    
 
    <p> 
 
     Black jack lateen sail fire in the hole Arr coxswain topgallant Gold Road sloop lugger cackle fruit parley spanker. Fathom barque fore tackle fluke Shiver me timbers Sea Legs overhaul long clothes fire in the hole furl Admiral of the Black. Lateen sail rum capstan tack provost swing the lead scurvy overhaul cutlass dance the hempen jig tackle bilge rat. 
 
    </p> 
 
    
 
    </div> 
 

 
</div>

関連する問題