CSS側で、リンク画像を小するにはどうしたらいいでしょうか？

解決済

質問者：Campus2
質問日時：2020/04/23 19:31
回答数：3件

HTML側以下です。
<div class="logo">
<a href="index.html"><img src="images/top.png" alt="TOP"></a>
-----------------------------------------------------------------------------
CSS側は以下です。
.logo {
float: left;
margin-top: 50px;
-----------------------------------
以上を加味して、top.pnの画像が馬鹿みたいにでかいです。
CSS側で、小さくしたいのですが、どんなプログラムで
小さいくなりますか？
　宜しくお願い致します。

ありがとうございます。
CSS側からの調整では、width: 10px;を追加して
以下としました。
.logo {
width: 2px;
width: 10px;
float: left;
margin-top: 50px;
以上で試しましたが、まったく画像の大きさは変化なしです。
CSS側からできるのであれば、効率が良く
管理もしやすくなりますので、できればいいのですが！
今のところ成功していません。

HTML側では、今まで以下で調整できていました。
<div class="logo">
<a href="index.html"><img src="images/top.png" alt="TOP" style="width:16%; position:absolute; top:10px; left:10px;" ></a>
</div>

補足日時：2020/04/25 19:30
通報する
ご回答くださいまして、ありがとうございました。
CSS側で画像縮小ができないかは、私的には未知です。
再度試みて、ダメな場合は、諦めます。

補足日時：2020/04/28 07:14
通報する

通報する

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

質問の本文を隠す

回答 (3件)

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

No.1ベストアンサー

回答者： gura_
回答日時：2020/04/23 20:30

Campus2さん

････CSS側で、小さくしたい･･････････

ご参考に↓
http://www.tohoho-web.com/css/prop/width.htm

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<style>
.logo {
float: left;
margin-top: 50px;
}
.logo img {
width:200px; height:200px; /* img のサイズを指定 */
}
</style>
</head>
<body>
<div class="logo">
<a href="index.html"><img src="https://s.yimg.jp/images/ks/official/nt/grd/prf_ … alt="TOP"></a>
</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

ご回答くださいまして、ありがとうございます。
現在検証中です。
時間が空き次第、試ます。
width: 100px;

通報する

お礼日時：2020/04/24 19:31

No.3

回答者： naokita
回答日時：2020/04/25 19:45

#2です。

＞ディスク上のサイズ：60.0 KB (61,440 バイト)です。
＞どれぐらいにすればいいでしょうか？
A,
ご希望の実寸サイズに縮小して、鮮明な範囲なら宜しいです。
特にサイズを気にする事なく、勝手にサイズダウンしているでしょう。
おそらく、2～10KB程度になってくれているでしょう。
（画像や画質によって数倍違うし、ご希望の実寸サイズが不明なので、こちらは何もわからないよ）
普通、左上のロゴだと、200px × 60pxとか160px × 50pxとかそんな感じじゃないかな？もっと小さなロゴもあるったり、横長の長方形ならそうだけど、正方形なら違うわけで・・・
ここの「教えて!goo」の左上のロゴは、163px × 42px（5.82KB）です。
サイズは個々のサイトや画像の問題です。

再度、確認です。
重要なのは、画像の加工段階で100％表示にして、ご希望の実寸サイズに縮小すれば良いのです！
Webサイト（HTML）でも、その加工時のサイズで表示されるから。

- 1
- 件

通報する

この回答へのお礼

早々ご回答くださいまして、ありがとうございましす。
かなり、値が低いてますね！
了解です。

通報する

お礼日時：2020/04/25 20:07

No.2

回答者： naokita
回答日時：2020/04/23 22:38

そもそも、CSSで設定するよりも、

その画像の大きさを希望の小サイズにしましょう！
その方が無駄な容量も食わず無駄が無いから・・・

CSSだけなら、
div.logo a img{ width:～～px; height:auto;}
で、良しでしょう。
この縦か横の優先させる方のサイズを固定で指定しておけば良いでしょう。

最大値を指定する、max-width:～～px; でも良いですけどね。
スマホ表示で、もっと小さくする場合もあります。

div.logo a img{ width:200px; height:auto;}
@media only screen and (max-width: 680px){ div.logo a img{ width:160px;}}
@media only screen and (max-width: 480px){ div.logo a img{ width:140px;}}