スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ

解決済

質問者：hayosato
質問日時：2022/04/18 12:52
回答数：2件

スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきません。画像を横に（画面99%)ほど、高さを50pxほどに広げると、
高さもそれだけ高くしないと、（付属画像のよう）に画像が欠けて表示されてしまいます。自由な大きさに高さや横幅を変えても画像が欠けないように表示させたいです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3 … integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://rensyuu12.tokyo/PHPMailer/jquery-3.6.0.m …
<title>k</title>
</head>

<style>

</style>

<body>

<div class="box"></div>
<p><a href="" id="sstop_btn"></a></p>
</body>

<script>
//追従ポップスマホのみ表示　場所問わず出現　display:none !important
$(function(){
$("#sstop_btn").on("click", function(){
$("html, body").animate({
scrollTop: 0//ページトップまでスクロール
}, 1000, "swing"); //ページトップスクロールの速さ。数字が大きいほど遅くなる
});
});
</script>

</html>

cssのコード

/* PCのみ追従する画像のスタイル　 */
#sstop_btn
{
position: fixed;
bottom: 50px;
left: 20px;
background: url(https://rensyuu12.tokyo/PHPMailer/nana.png);
background-repeat: no-repeat; /*background: url 画像の繰り返しを指定しない */
background-size:cover; /*background: url画像の縦横比を維持したまま余白を埋めたいのなら画像のサイズを指定 */

width:680px; /* 画像のサイズを指定 */
height:250px; /*画像のサイズを指定 */
padding-top: 6px;
padding-right: 3px;
padding-bottom: 6px;
padding-left: 3px
}

.box{

background-color: blue;
width: 100%;
height: 900px;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2022/04/18 14:37

こんにちは

先日も回答しましたように、要素のサイズ（＝縦横比）と背景画像の比が一致していなければ、coverの場合は当然ながら画像が見切れます。

最終的にどうしたいのかが、あいかわらず不明のままですが・・・

とにかく全体が埋まれば良いのなら、background-sizeでそのように指定すれば、要素サイズに合わせて拡大/縮小してくれます。
ただし、当然の結果として画像のプロポーションは無視されます。

プロポーションを生かしたまま画像全体を表示したいのであれば、containにします。
この場合は、no-repeatであれば当然ながら余白が生じます。
余白は、background-colorで埋めておけば良いでしょう。
あるいは、repeatにすれば画像を繰り返すことで全体を埋めてくれます。

要は、好き勝手なサイズの要素に対して異なるプロポーションの画像を、質問者様がどのように埋め込みたいのかという話になります。

- 1
- 件

通報する

この回答へのお礼

ありがとうございます。この方法の方がやっぱり良かったです。感謝致します。

通報する

お礼日時：2022/04/18 16:16

No.1

回答者： t_fumiaki
回答日時：2022/04/18 13:53

これはハマリ処です。

back-ground画像の横幅を100%などにして、高さは必ず0。
調整はpadding-bottom:xx%；　と％で調整します。

ーー　例　ーーーーーーーーーーーーーーーーーーーーーー

width:680px; /* 画像のサイズを指定 */
↓
width:100%; （98%とか色々調整）

height:250px; /*画像のサイズを指定 */
↓
height:0;（必ず0）

padding-bottom: 6px;
↓
padding-bottom: 100%;（値は色々調整）