重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：hayosato
  • 質問日時：
  • 回答数：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
}

「下にスクロールしても、追従するボタンのコ」の質問画像
通報する

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

質問の本文を隠す

A 回答 (1件)

参考程度に

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんばんは



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

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


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

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

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

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

ありがとうございます。やりたかった動作は
background-size:cover; の方でした。ありがとうございます。上記の情報で解決できました。

通報する
お礼日時：2022/04/17 12:38

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報