親要素のaのサイズを子要素のimgに合わせたい

色々試してみましたが、imgの画像が小さくなったり、a要素のサイズがかわらなかったり、aの親要素のサイズ変更なども試しましたがうまくいきません。ご教授お願い致します。

HHTML
1<body>
2<div class="wrapper01">
3    /*省略*/
4
5<div class="insyoku-container">
6<div class="insyoku">
7<p class="insyokuten2"><a href="*****.html"><img src="images/*****.jpg" alt="*****"></a></p>
8</div>
9<div class="insyoku">
10<p class="insyokuten2"><a href="*****.html"><img src="images/*****.jpg" alt="*****"></a></p>
11</div>
12<div class="insyoku">
13<p class="insyokuten2"><a href="*****.html"><img src="images/*****.jpg" alt="*****"></a></p>
14</div>
15</div>
16<a href="../****/****/****.html">aaaーはこちら</a><br>
17<a href="../****/****/****.html">bbbはこちら</a><br>
18</main>
19<div class="bottom">
20<footer>
21<ul class="footer-nav">
22    <li class="footer-nav1"><a href="../../****.html">あああ</a></li>
23    <li>
24    <ul class="footer-nav1">
25        <li><a href="****/****.html">いいい</a></li>
26        <ll><a href="****/****.html">ううう</a></ll>
27        <li><a href="****/****/*****.html">えええ</a></li>
28        <li><a href="****/****/****/****/****.html">おおお</a></li>
29        </ul>
30    </li>
31    <li>
32    <ul class="footer-nav2">
33    <li class="niretu"><a href="../****/****.html">かかか</a></li>
34    </ul>
35    </li>
36    <li>
37    <ul class="footer-nav2">
38    <li class="niretu"><a href="../****/****.html">ききき</a></li>
39    </ul>
40    </li>
41    <li>
42    <ul class="footer-nav2">
43    <li class="niretu"><a href="../****/****.html">くくく</a></li>
44    </ul>
45</li>
46</ul>
47<p class="tyosakuken">&copy;2020 *********** All rights reserved</p>
48    </footer>
49    </div>
50</div>
51</body>
52</html>

CSS
1.wrapper01{
2    width: 100%;
3    min-height: calc(100% - 50px);
4}
5.insyoku-container{
6    display: flex;
7    align-items: center;
8    flex-wrap: nowrap;
9    margin-bottom: 0;
10}
11.insyoku {
12    width: 33%;
13    width: calc(100% / 3);
14}
15.insyokuten2 img{
16    height: auto;
17    width: 80%;
18    margin-top: 20px;
19    margin-left:auto;
20    margin-right: auto;
21}
22.insyokuten2:hover{
23    opacity: 0.6;
24}
25.bottom{
26    height:200px;
27    margin-top: 0;
28    padding-top: 30px;
29    line-height: 20px;
30    background-color:#afeeee;
31}
32.footer-nav{
33    list-style-type:none;
34    align-items: start;
35    padding: 5px 15px 10px 15px;
36    margin-bottom: 10px;
37    flex-wrap: wrap;
38    display : -webkit-box;     /* old Android */
39    display : -webkit-flex;    /* Safari etc. */
40    display : -ms-flexbox;     /* IE10        */
41    display : flex;
42}
43.footer-nav1{
44    list-style-type: none;
45    align-items: normal;
46    padding: 0 10px 5px 10px
47}
48.footer-nav2{
49    list-style-type: none;
50    align-items: normal;
51    padding: 0 10px 5px 10px;
52}
53.tyosakuken{
54    color:#444444;
55    text-align: center;
56    bottom: 0;
57}

reset.CSS
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}

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

回答1件

ベストアンサー

以下の理由により、恐らくになります。
・どのようなreset.cssが使用されているのかわからない。
・imgのサイズが分からない。

※バナー画像なので、縦横比は３つすべて同じという前提でやっております。
※こちらの環境では、クロム、フォックス、サファリで動作の確認が取れております。
※.insyokuなど不要と思えるものは消しました。

<div class="insyoku-container">
<a href="/"><img src="images/kks_thumb.jpg" alt="*****"></a>
<a href="/"><img src="images/kks_thumb.jpg" alt="*****"></a>
<a href="/"><img src="images/kks_thumb.jpg" alt="*****"></a>
</div>

.insyoku-container{
  font-size:0;
  padding:20px 0 0;
}
.insyoku-container a{
  display:inline-block;
  width: calc(80% / 3 );
  margin: 0 calc(10% / 3 );
}
.insyoku-container img{
  vertical-align:bottom;
  width: 100%;
}

imgのmargin-topは.insyoku-containerのpaddingにしました。
imgのmargin-left,rightはaに持たせました。
如何でしょうか？

投稿2020/11/29 19:49

tomtomtomtom

総合スコア563

質問をすることでしか得られない、回答やアドバイスがある。

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

関連した質問