https://teratail.com/questions/179358
先日こちらで、、articleの半分を占める背景画像を
ウィンドウの拡大縮小と連動させて拡大縮小させたいという質問に対し、
↓
html
1<article class="kiji"> 2 <div class="kiji_top"> 3 <small>補足</small> 4 <h2>見出し</h2> 5 </div> 6 7 <p class="kiji_w"> 8 ~文章~ 9 </p> 10 11 <div class="btn"> 12 <a href="/#">リンクボタン</a> 13 </div> 14 15 </article>
以上のHTMLについて、以下のCSSで解決に至りました。
CSS
1article.kiji { 2 position: relative; 3} 4 5article.kiji::before { 6 content: ''; 7 position: absolute; 8 left: 0; 9 width: 50%; 10 height: 100%; 11 /* 画像はこちらで */ 12 background-image: url("背景画像"); 13 background-position: left top; 14 background-size: cover; 15 background-repeat: no-repeat;
ここからが本題なのですが、
教えていただいたCSSではある程度までは画像は拡大縮小してくれるのですが
ウインドウ幅が1700前後になるとarticleの縦幅を越えて不格好になってしまいます。
max-heightやoverflow:hiddenを使っても解決せず…
親要素articleの高さを越えないようにするにはどうすればよいでしょうか。
参考までに背景画像の大きさは1900×1692です。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/18 05:57
2019/03/19 03:06