list内での画像の大きさ設定

list内でaタグの下に、画像とテキストを入れて、その幅を画面の大きさに合わせて半分に設定したいのですが、画像が横いっぱいに広がりません。
どのように設定したら良いのでしょうか。

HTML
1<div class="boxB">
2<div class="boxB-1">
3<ul>
4	<li><a href="#">
5		<div class="pict"><img src="img/pic1.jpg"></div>
6		<div class="text">HELLO WORLD</div>
7	</a></li>
8	<li><a href="#">
9		<div class="pict"><img src="img/pic1.jpg"></div>
10		<div class="text">HELLO WORLD</div>
11	</a></li>
12	<li><a href="#">
13		<div class="pict"><img src="img/pic1.jpg"></div>
14		<div class="text">HELLO WORLD</div>
15	</a></li>
16	<li><a href="#">
17		<div class="pict"><img src="img/pic1.jpg"></div>
18		<div class="text">HELLO WORLD</div>
19	</a></li>
20
21</ul>
22
23</div>
24<div class="boxB-2">
25<ul>
26	<li><a href="#">BOX2</a></li>
27	<li><a href="#">BOX2</a></li>
28	<li><a href="#">BOX2</a></li>
29	<li><a href="#">BOX2</a></li>
30	<li><a href="#">BOX2</a></li>
31	<li><a href="#">BOX2</a></li>
32	<li><a href="#">BOX2</a></li>
33	<li><a href="#">BOX2</a></li>
34	<li><a href="#">BOX2</a></li>
35	<li><a href="#">BOX2</a></li>
36	<li><a href="#">BOX2</a></li>
37	<li><a href="#">BOX2</a></li>
38	<li><a href="#">BOX2</a></li>
39	
40</ul>
41
42</div>
43</div>
44
45.boxB {
46	content: "";
47	clear: both;
48	display: block;
49}
50
51.boxB-1 {
52	float: left;
53	width: 80%;
54	background: green;
55}
56.boxB-2{
57	float: left;
58	width: 20%;
59	background: yellow;
60}
61.boxB-1 ul {
62	list-style: none;
63	padding: 0;
64	margin: 0;
65
66}
67
68.boxB-1 li a {
69	text-decoration: none;
70}
71
72.boxB-1 ul:after {
73	content: "";
74	clear: both;
75	display: block;
76}
77
78.boxB-1 li a{
79	float: left;
80	width: 50%;
81
82
83}
84.boxB-1 img {
85	object-fit: cover;
86  width: 100%;
87  max-height: 100%;
88}
89
90.boxB .pict {
91	width: 50%;
92}
93
94.boxB-2 ul {
95	list-style: none;
96
97
98}
99
100.boxB-2 li a {
101	text-decoration: none;
102}

kei344

2018/12/29 03:02

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2018/12/29 03:37

https://jsfiddle.net/48kb0gxz/ 提示されたコードだけではどう配置したいのかがわかりにくいので、現状のスクリーンショットと、どういうレイアウトにしたいのかを質問文に追記していただけませんか？

退会済みユーザー

2018/12/29 03:49

画像を親要素の横幅いっぱいに広げるにはどうすればよいのでしょうか。現状は、boxBが画面の８０％で、その下のboxb-1はboxBの５０％の設定です。このboxb-1の横幅に合わせて、その下のimgを横幅いっぱいにひろげたいです。

kei344

2018/12/29 04:16

提示されたCSS以外のCSSはありますか？問題が再現（ https://jsfiddle.net/48kb0gxz/ ）しませんでした。

m.ts10806

2018/12/29 04:20

現象が再現するブラウザの種類とバージョンも追記してください

退会済みユーザー

2018/12/29 04:24

chrome バージョン: 71.0.3578.98 です。

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

回答1件

ベストアンサー

これを消す。

CSS
1.boxB .pict {
2    width: 50%;
3}
4```**動くサンプル：**[https://jsfiddle.net/48kb0gxz/1/](https://jsfiddle.net/48kb0gxz/1/)

投稿2018/12/29 04:29

kei344

総合スコア69400

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

list内での画像の大きさ設定

関連した質問