Q&A
全体のCSSを開示してくれませんか？
実際のソースがないと回答者は憶測で話をするしかなくなりますので…。
画像をウィンドウに合わせ、縦横比を保ったまま縮小させたい。
発生している問題
スタイルシートを記述しても画像が縮小されず、はみ出してしまう。
該当のソースコード
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>aquamarine</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/reset.css" rel="stylesheet" type="text/css"> </head> <body> <div id="index" class="big-bg"> <header class="page-header"> <nav> <ul> <li><a href="#">about</a></li> <li><a href="#">watercreatures</a></li> <li><a href="#">goods</a></li> <li><a href="#">contact</a></li> </ul> </nav> <div class="wrapper"> <h1><img class="logo" src="images/logo1.png"></h1> </div> </header> </div><!--#index.big-bg--> <main> <div class="about_bg"> <div id="about" class="wrapper"> <div class="txt_box"> <h2>海の生き物</h2> <p>約30億年前に暖かくて浅い海底の堆積(たいせき)物中で地球最初の生物が生まれたといわれている。 そのころの地球の大気と海水中には遊離酸素がほとんどない状態であった。 初期の生物は単細胞の細菌のような原核微生物であって、周囲の有機物を栄養源としていたが、 そのうち光合成能力をもつ藍藻(らんそう)（らん色細菌）が出現し、大気や海水に酸素を供給し始めた。 酸素は大気の上層でオゾンとなり、オゾン層は生物に有害な紫外線を吸収し生命を守る傘となった。 それ以後、生物は水中や陸上に生活圏を広げ始め、環境に適応しながら進化して現在に至っている。</p> </div><!--.txt_box--> <div class="update"> <h3>更新</h3> <dl> <dt>2020-5-5</dt><dd>goodsに新アイテム追加</dd><br> <dt>2020-5-3</dt><dd>新しい生き物を追加</dd> </dl> </div><!--.update--> </div><!--#about--> </div> <div id="watercreatures" class="big-bg"> <div class="page-header wrapper"> <h1><img class="logo" src="images/logo2.png"></h1> </div><!--.page-header wrapper--> </div><!--#watercreatures.big-bg--> <article> <div class="wrapper"> <section> <figure class="img_box"> <img src="images/sea1.jpg"> <figcaption>ザトウクジラ</figcaption> </figure> <h4 class="sub-title">クジラの仲間</h4> <p></p> </section> <section class="Even_number"> <h4 class="sub-title">サメの仲間</h4> <p></p> <figuree class="img_box" > <img src="images/sea2.jpg"> <figcaption>ヨゴレ</figcaption> </figure> </section> <section> <figure class="img_box"> <img src="images/sea3.jpg"> <figcaption>ゴマフアザラシ</figcaption> </figure> <h4 class="sub-title">アザラシの仲間</h4> <p></p> </section> <section class="Even_number"> <h4 class="sub-title">ペンギンの仲間</h4> <p></p> <figure class="img_box"> <img src="images/sea4.jpg"> <figcaption>コウテイペンギン</figcaption> </figure> </section> <section> <figure class="img_box"> <img src="images/sea5.jpg"> <figcaption>マナティー</figcaption> </figure> <h4 class="sub-title">カイギュウの仲間</h4> <p></p> </section> <section class="Even_number"> <h4 class="sub-title">軟体動物</h4> <p></p> <figure class="img_box"> <img src="images/sea6.jpg"> <figcaption>ミズダコ</figcaption> </figure> </section> </div><!--.wrapper--> </article> <div id="goods" class="big-bg"> <div class="page-header wrapper"> <h1><img class="logo" src="images/logo3.png"></h1> </div><!--.page-header--> </div><!--#goods.big-bg--> </main> </body> </html>
CSS
/* CSS Document */ /*---------共通--------- ^------------------------------*/ html{ font-size: 100%; } body{ background-color: #ccdaff; font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; line-height: 1.7; color: whitesmoke; color: black; width: 100vw; } .wrapper{ width: 1400px; margin: 0 auto; padding: 0 3%; } .big-bg{ background-size: cover; background-repeat: no-repeat; background-position: center top; } #watercreatures,#goods{ margin-bottom: 50px; } #watercreatures,#goods{ height: 700px; } /*---------ヘッダー--------- ^------------------------------*/ #index{ background-image: url(../images/header1.5.jpg); height: 100vh; } nav ul{ display: flex; padding:0 30%; margin: 0 auto; justify-content: space-between; background-color:rgba(255,255,255,0.5); } nav ul li { list-style: none; text-decoration: none; } .logo{ width: 300px; } #goods .logo{ width: 150px; } a{ text-decoration: none; color: black; } a:hover{ color: blue; } /*---------解説--------- ^------------------------------*/ .about_bg{ background-color: white; } #about{ width: 80%; color: black; margin: 0 auto; } .txt_box h2{ font-size: 4rem; } .txt_box p{ color: black; font-size: 2rem; line-height: 1.7em; } .txt_box,.update{ padding:30px 2%; } /*---------更新--------- ^------------------------------*/ /*---------海の生き物--------- ^------------------------------*/ #watercreatures{ background-image: url(../images//header2.5.jpg); } section{ padding: 10px 4%; width: 80%; } img{ max-width: 100%; } /*---------グッズ*--------- ^------------------------------*/ #goods{ background-image: url(../images/header3.5.jpg); } /*---------連絡*--------- ^------------------------------*/ コード
試したこと
imgに対して
img{
max-width:100%;
}
↓
img{
max-width:100%;
height:auto;
}
↓
img{
object-fit: cover;
}
の順で試しましたが変わりません。
親要素にも幅を指定するなどしているんですが、そうするとウィンドウが縮小されていない状態でも画像が小さくなるなど
してしまいます。
補足情報（FW/ツールのバージョンなど）
visual Studio Code
呈示のHTMLとCSSだけでは症状か再現できないので、再現できるコードを提示してください。
回答1件
0
ベストアンサー
全体のCSSが提示されていないのでなんとも言えませんが……
imgにmax-width: 100%;を付けた場合、
「親要素の幅いっぱいに画像を広げる」といった動作をするので、
親要素がウィンドウをはみだした幅か、そもそも親要素に幅が指定されたものがいないという可能性が考えられます。
とりあえずbodyあたりにwidth: 100vw;等を指定してみてはどうでしょうか。
---追記---
ありがとうございます。
現在、.wrapperの幅が1400pxで固定されている状況なので、
その幅に合わせて画像のサイズも固定されているという感じですね。
CSS
1.wrapper{ 2 width: 1400px; 3 margin: 0 auto; 4 padding: 0 3%; 5}
こちらを幅に合わせて伸縮したいのであれば、max-widthでの指定はどうでしょうか？
要素の大きさを画面幅に合わせつつも、幅いっぱいには広がらないようになってくれます。
CSS
1.wrapper{ 2 /*width: 1400px;*/ 3 max-width: 1400px; 4 margin: 0 auto; 5 padding: 0 3%; 6}
投稿2020/03/28 01:18
編集2020/03/28 01:48総合スコア354
あなたの回答
tips
プレビュー
