2017-02-20 5 views
0

私は、モニタのサイズに応じてhtmlウェブページのズームを変更する方法があるのだろうかと思っていました。たとえば、500px x 500pxの画像はノートパソコンでは大きく見えますが、PC用のモニタでは小さく見えるようになります。モニターのサイズが変わると画像のサイズが変わるような解決策はありますか? また、画面をズームするだけでピクセル単位で変更できます。html - 異なるモニタサイズに自動的に拡大

ありがとうございます!

+0

これはレスポンシブデザインと呼ばれ、非常に使いやすく、使いやすいboostratpを使用できます(クラス: '.img-responsive') –

+0

@singebatteurこれをキャンバスなどの別の要素に適用するとどうなりますか? –

+0

私はキャンバスについて知りませんが、 '古典的な'要素の場合、相対幅を50%、500pxの50%、1920pxの50%に設定する必要があります。 –

答えて

1

pxの代わりに%を使用してイメージのサイズを設定できます。

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

ソース:https://www.w3schools.com/tags/att_img_width.asp

またはCSSであなたが使用するデバイスに応じて、異なるスタイルを持っているメディアクエリーを使用することができます。

+0

どのようにサイズを動的に変更しますか、あなたはウィンドウのサイズを変更するときのように? –

+0

サイズがパーセンテージとして設定されている場合、コンテナのサイズを変更すると、それに比例してサイズが変更されます。 メディアのクエリについては、私にお読みください:https://www.w3schools.com/css/css3_mediaqueries.asp – Sylvain

+0

画像のサイズではなく、ズームを意味します。 –

関連する問題