添付画像のように、weiboと書いてある画像を日本語ボタンと同じ大きさにしたくwidthを調整しても反映されません。ご教授をお願いいたします。※できれば日本語のボタンの左側に配置希望です　cssは日本語と中国語の切り替え機能があるため、2つかかっています。

html
1<!doctype html>
2<html lang="zh">
3<head>
4<meta charset="utf-8">
5<title>under construction</title>
6<meta name="viewport" content="width=device-width">
7<meta name="description" content="サンプル">
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9		<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
10		<link rel="stylesheet" href="css/reset.css">
11    <link rel="stylesheet" href="css/style.css">
12		<link rel="stylesheet" href="css/style_ch.css">
13
14<script type="text/javascript">
15$(function(){
16	$("img").hover(function(){
17		$(this).attr("src",$(this).attr("src").replace('_off','_on'));
18	},function(){
19		$(this).attr("src",$(this).attr("src").replace('_on','_off'));
20	});
21});
22			
23			$(function(){
24  var headerHeight = $('header').outerHeight(); // ヘッダーについているID、クラス名など、余白を開けたい場合は + 10を追記する。
25  var urlHash = location.hash; // ハッシュ値があればページ内スクロール
26  if(urlHash) { // 外部リンクからのクリック時
27    $('body,html').stop().scrollTop(0); // スクロールを0に戻す
28    setTimeout(function(){ // ロード時の処理を待ち、時間差でスクロール実行
29      var target = $(urlHash);
30      var position = target.offset().top - headerHeight;
31      $('body,html').stop().animate({scrollTop:position}, 500); // スクロール速度ミリ秒
32    }, 100);
33  }
34  $('a[href^=#]').click(function(){ // 通常のクリック時
35    var href= $(this).attr("href"); // ページ内リンク先を取得
36    var target = $(href);
37    var position = target.offset().top - headerHeight;
38    $('body,html').stop().animate({scrollTop:position}, 500); // スクロール速度ミリ秒
39    return false; // #付与なし、付与したい場合は、true
40  });
41});
42
43
44
45			
46</script>
47		
48</head>
49	
50<body>
51<div class="container" id="top">
52<header>
53    <h1><a href="https://weibo.com"><img src="img/weibo.jpg" alt="サンプル"></a></h1>
54    <h2><a href="https://weibo.com"><img src="img/weibo.jpg" alt="サンプル"></a></h2>
55    
56<h3><a href="index.html">日本語</a></h3>
57</header>
58```![イメージ説明](4e7f67b85da5e6faf12445096737367b.jpeg)
59
60
61```css1
62@charset "UTF-8";
63html,body{
64    font-family : 'SimSun','MS UI Gothic','Hei','sans-serif';
65    
66}
67
68/*ここからPC（769px以上）環境の設定*/
69@media(min-width:769px){
70header{
71display:flex;
72justify-content: center;
73}
74    header h1 a{
75display:block;
76        width:100px;
77        height: auto;
78}
79    
80        header h2 a{
81display:none;
82        width:100px;
83        height: auto;
84}
85    
86    
87header h3 a{
88color:#fff;
89    padding: 6px 10px;
90    display: block;
91    margin: 5px 0;
92    background: #F19EC2;
93    border-radius: 3px;
94    text-decoration: none;
95font-size: 16px;
96    font-weight: bold;
97	
98}
99
100    
101}
102
103/*ここからスマートフォン（768px以下）環境の設定*/
104@media(max-width:768px){
105header{
106display:flex;
107justify-content: center;
108}
109header h1 a{
110color:#fff;
111    padding: 6px 10px;
112    display: block;
113    margin: 5px 0;
114    background: #F19EC2;
115    border-radius: 3px;
116    text-decoration: none;
117font-size: 16px;
118    font-weight: bold;
119    width:5px;
120	
121}
122    .weibo{
123        display: none;
124        
125    }
126    .weibo_smp{
127        display: block;
128        margin: 5px 0;
129        
130    }
131}
132

css2
1@charset "UTF-8";
2html,body{
3    font-family: "Sawarabi Mincho";
4    
5}
6
7footer{
8	text-align:center;
9    background:#F19EC2;
10	padding: 10px;
11    margin-top: 20px;
12    color:#fff;
13}
14.oneArea{
15 margin-top: 20px;   
16    
17}
18
19
20header h1{
21padding: 0 20px;
22	
23}
24
25
26
27.tax{
28    font-weight: bold;
29    color:#f00;
30}
31
32/*ここからPC（769px以上）環境の設定*/
33@media(min-width:769px){
34header{
35display:flex;
36justify-content:center;
37	
38}
39    .twitter{
40        display: block;
41        
42    }
43    .twitter_smp{
44        display: none;
45        
46    }
47    
48}
49
50/*ここからスマートフォン（768px以下）環境の設定*/
51@media(max-width:768px){
52header{
53display:flex;
54justify-content: center;
55}
56header h1 a{
57color:#fff;
58    padding: 6px 10px;
59    display: block;
60    margin: 5px 0;
61    background: #F19EC2;
62    border-radius: 3px;
63    text-decoration: none;
64font-size: 16px;
65    font-weight: bold;
66	
67}
68    .twitter{
69        display: none;
70        
71    }
72    .twitter_smp{
73        display: block;
74        margin: 5px 0;
75        
76    }
77    
78}
79
80

行動規範の内容に同意します

回答2件

imgの親要素(header h1 a)に width を設定していますが、それを変更してもimgにwidthを設定しないとimgの幅は変更されません。下記のようにwidth: 100%;を設定すると親要素と同じ幅になりますので、header h1 aの設定が反映されます。

css
1header h1 a img,
2header h2 a img {
3   width: 100%;
4}

投稿2021/01/18 02:33

hatena19

総合スコア34073

ベストアンサー

画像の大きさを調整したいのであれば、imgに対するスタイルでwidthを指定してください。

CSS
1    header h1 a img {
2        width: 100px;
3    }

投稿2021/01/18 02:35

Daregada

総合スコア11990

21120903ryosuke

2021/01/18 02:39

サイズが小さくなりました！ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

widthが効かない理由について

関連した質問