Q&A
「imgのサイズにaのサイズを合わせたい」について質問です。
現状で、aのサイズは、imgとh1,pなどのサイズを含んでいますが、
imgだけにしたいということでしょうか？
以前にも同じような質問をさせていただいたんですが、そこでいただいた内容を適用したら、画像のレイアウトが大きく変わり小さくなるものと大きくなるものとバラバラになってしまいうまくいきませんでした。
前にご教授いただいた設定はcompany-wrapperに適用しました。a要素にサイズ適用すると横並びにしている左から2枚はうまくいくのですが、3枚目が少し画像サイズが違うため個別にサイズを設定しているので二枚目に重なるようにwidthのサイズが広がってしまいます。
ご教授お願い致します。
HTML
1<div class="company-wrapper"> 2<div class="company"> 3 <a href="**************************.html"><img class="mati" src="************.jpg" alt="ああ"><br><h1 class="topsetumei">*************</h1><p class="zigyoubetu">***********************<br>********************<br>*****************<br>*****************</p></a> 4</div> 5<div class="company"> 6<a href="************.html"><img class="kaisya" src="*************.jpg" alt="いい"><br><h1 class="topsetumei">************</h1><p class="zigyoubetu">********************<br>****************<br>***************<br>*********************</p></a> 7</div> 8<div class="company"> 9<a href="******************.html"><img class="keitai" src="***********.jpg" alt="うう"><br><h1 class="topsetumei">********</h1><p class="zigyoubetu">*********************<br>******************と<br>**************************</p></a> 10</div> 11</div>
CSS
1.company-wrapper{ 2 display: flex; 3 width: calc(90% / 3 ); 4 margin:0 5} 6.company{ 7 margin:0; 8 padding: 0; 9} 10.company a{ 11 text-decoration: none; 12 display: inline-block; 13} 14.top-sentence01{ 15 line-height: 2.1; 16 font-size: 19px; 17 margin-top: 30px; 18 margin-bottom: 30px; 19 text-indent: 2em; 20} 21.mati,.kaisya{ 22 height:auto; 23 width:400px; 24 margin:30px 0, 0, 0; 25 margin-right: 0; 26 padding: 0; 27} 28.keitai{ 29 height:266px; 30 width:400px; 31 margin-bottom: 12px; 32}
resetCSS
1html, body, div, span, object, iframe, 2h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3abbr, address, cite, code, 4del, dfn, em, img, ins, kbd, q, samp, 5small, strong, sub, sup, var, 6b, i, 7dl, dt, dd, ol, ul, li, 8fieldset, form, label, legend, 9table, caption, tbody, tfoot, thead, tr, th, td, 10article, aside, canvas, details, figcaption, figure, 11footer, header, hgroup, menu, nav, section, summary, 12time, mark, audio, video { 13 margin:0; 14 padding:0; 15 border:0; 16 outline:0; 17 font-size:100%; 18 vertical-align:baseline; 19 background:transparent; 20} 21 22body { 23 line-height:1; 24} 25 26article,aside,details,figcaption,figure, 27footer,header,hgroup,menu,nav,section { 28 display:block; 29} 30 31nav ul { 32 list-style:none; 33} 34 35blockquote, q { 36 quotes:none; 37} 38 39blockquote:before, blockquote:after, 40q:before, q:after { 41 content:''; 42 content:none; 43} 44 45a { 46 margin:0; 47 padding:0; 48 font-size:100%; 49 vertical-align:baseline; 50 background:transparent; 51} 52 53/* change colours to suit your needs */ 54ins { 55 background-color:#ff9; 56 color:#000; 57 text-decoration:none; 58} 59 60/* change colours to suit your needs */ 61mark { 62 background-color:#ff9; 63 color:#000; 64 font-style:italic; 65 font-weight:bold; 66} 67 68del { 69 text-decoration: line-through; 70} 71 72abbr[title], dfn[title] { 73 border-bottom:1px dotted; 74 cursor:help; 75} 76 77table { 78 border-collapse:collapse; 79 border-spacing:0; 80} 81 82/* change border colour to suit your needs */ 83hr { 84 display:block; 85 height:1px; 86 border:0; 87 border-top:1px solid #cccccc; 88 margin:1em 0; 89 padding:0; 90} 91 92input, select { 93 vertical-align:middle; 94}
いつもありがとうございます。
ｐまでのサイズで考えてます。
おはようございます^^
そうすると、
「imgのサイズにaの幅を合わせたい」ということでしょうか？
既にあっているのですが？？
おはようございます
h1までだと思うのですが、ｐまですることは出来ないですか？
あれ？？
こちらの環境では既にすっぽり入っています^^;
aの高さはだいたい350px弱ほどあります。
無関係かと思いますが、
margin:30px 0, 0, 0; ←これは誤記かと思います。
ちょうどリンクされてます。ありがとうございます。
回答欄に記入していただければベストアンサーにさせていただきます。
また機会がありましたらよろしくお願い致します。
回答1件
0
ベストアンサー
既にlet様のご希望のようにサイズには問題がないようです。
別件にはなりますが
・margin:30px 0, 0, 0; ←必要ないように思います。また、正しくはmargin:3opx 0 0 0;かと思います。
・↑これの下のmargin-right: 0;も必要ないように思います。
・width: calc(90% / 3 );←必要ないように思います。
投稿2020/12/08 23:19
総合スコア563
あなたの回答
tips
プレビュー
