ここから本文です

<div id="container">の中に<img style="position:relative;top:50px">がある時、c...

ico********さん

2019/4/1822:29:50

<div id="container">の中に<img style="position:relative;top:50px">がある時、containerを画面にCSSで100%に拡大表示する時、

imgも同様に場所も移動し、大きさも変わるようにすることってできますか?

閲覧数:
24
回答数:
2

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

y_h********さん

2019/4/1909:22:02

大きさを変えるならimg要素の幅とか高さをパーセント指定するのはどうでしょうか。
containerの大きさに対して何パーセントかなので、containerの大きさが変わればimgも変わります。
マウスオーバーするとcontainerの大きさが変わる、とかなら、
#container:hover img { ~}
みたいにセレクタを工夫するとか……。
場所をどう移動したいのかが書いていないので分からないのですが、位置指定もパーセントでできますし、上と同じようにセレクタで切り替えるのもいいと思います。

質問した人からのコメント

2019/4/25 19:45:02

ありがとうございました!!なるほどです!!

ベストアンサー以外の回答

1〜1件/1件中

ybb********さん

2019/4/1921:12:22

ico********さん

>・・・・・imgも同様に場所も移動し、大きさも変わる・・・・・・・・・・・・・

ご参考に↓
<!DOCTYPE html>
<html>
<head>
<style>
html,body { width:100%; height:100%; margin:0; padding:0; }
#container { width:100%; height:100%;}
#container img{ width:50%; height:50%; left:10vw; }
</style>
</head>
<body>
<div id="container">
<img style="position:relative;top:50px" src="https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png">
</div>
</body>
</html>

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる