イメージのサイズをhtmlで

Question

私は自分のウェブサイトを作っています。写真の見た目に問題があります。小さなブラウザの画面では、写真はきれいに見えますが、大きなブラウザでは写真が引き伸ばされて見えます。私は高さと幅の値のパーセント値を使用してみましたが、それは動作していないようです。助言がありますか？

Answer 1

HTML 4.01では、幅はピクセル単位または含める要素の％単位で定義できます。 HTML5では、値はピクセル単位である必要があります。

だから、このようなものを試してみてください。

<img src="smiley.gif" alt="Smiley face" width="42" height="42"> 

これはCSSでも行うことができます。これに続くのはlinkです。

Answer 2

imgタグに高さと幅に言及した値は、画質

を壊す代わりにスタイルタグの中にスタイルタグを使用し、あなたの高さと幅の値を定義します。

Answer 3

これを行うには2通りの方法があります。
1）小さな画面と大きな画面で別々の2つの画像を使用します。メディアクエリを使用することにより、あなたがそれぞれの画像を表示または非表示にすることができます

<img id="mobleimg" src="mobileimg.jpg"> 
<img id="desktopimg" src="desktopimg.jpg> 
@media screen and (min-width:320px){ 
#mobileimg{display:block;} 
#desktopimg{display:none;} 
} 
@media screen and (min-width:980px){ 
#mobileimg{display:none;} 
#desktopimg{display:block;} 
} 

2）デスクトップサイズで一つの大きなイメージを使用し、小型画面デバイス幅