下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない

解決済

質問者：hayosato
質問日時：2022/04/16 21:31
回答数：1件

下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されないのですが、（付属画像参考）このボタンの中にある画像をボタンにいっぱいに表示させたいです。

回答よろしくお願いいたします。

<!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="o.css">

<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>
<button id="top_btn">トップに戻る</button>

<h1>トップ</h1>
<br><hr><hr><br><hr><hr><br><hr><hr><br><hr><hr><br><hr><hr><br><hr><hr><br><hr><hr><br><hr><hr><br><hr><hr><br><hr><hr><br>
</body>
<script>
$(function(){
$("#top_btn").on("click", function(){
$("html, body").animate({scrollTop: 0 }, 1000, "swing");
});
});
</script>
</html>

cssのコード以下

#top_btn
{
position: fixed;
bottom: 10px;
right: 10px;
background: url(https://rensyuu12.tokyo/PHPMailer/abcde.png);
background-repeat: no-repeat; /* 画像の繰り返しを指定 */

background-size:contain; /* 画像のサイズを指定 */
width:30%; /* 横幅のサイズを指定 */
height:30%;

padding-top: 6px;
padding-right: 3px;
padding-bottom: 6px;
padding-left: 3px
}

通報する

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

質問の本文を隠す

回答 (1件)

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

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2022/04/16 23:11

こんばんは

ご提示のソースで使用している画像サイズは 492 × 469 px のようです。
一方で、ボタンのサイズはブラウザ画面サイズに依存するように指定されているので、当然ながら同じサイズ（＝縦横比）になるはずはありません。

＞このボタンの中にある画像をボタンにいっぱいに表示させたいです。
最終的にどのようになさりたいのか記載がないので、わかりませんけれど・・・

◇ボタンのサイズに画像を合わせたいのなら、
①background-size: cover;にしておけば長い方のサイズにフィットするようになるので余白はなくなります。
ボタンのプロポーションによっては、画像が見切れるので、中央合わせにしておくなどが必要かも知れません。

②background-size: 100% 100%;
などとしておけば、ボタンのサイズにフィットするように画僧の縦横比を調整できます。
ただし、画像のプロポーションは保たれません。

③あるいは、現状の contain;のままで、位置を中央合わせにしておき、余白が出る部分にはbackground-colorで画像の外側と同じ色（＝グレイ）を設定しておく方法も考えられます。
（背景色が余白部分を埋めるので、画像の境界線は出なくなります）

◇画像のプロポーションを維持して、ボタンのサイズを合わせても良いのなら、
④ボタンのサイズ指定を
width: min(30vw, 30vh);
height: min(28.6vw, 28.6vh);
などとしておくとか。
（ほぼ画像のプロポーションと同じサイズになります）