画像の大きさに関わらず画像の大きさが文字に被らないよう自動調整できるようにしたい

こんにちは。現在CSSの学習をしているものです。

現在、画面左の画像の大きさを

<div class="col-lg-4 col-sm-12">

内に収めたいと考えています。
画像の大きさに関わらず、CSSなどを用いて画像の大きさを書籍の詳細情報の個所と被らないように自動調節できるようにしたいと考えています。（レスポンシブ対応まで含めて）
現在の私のソースコードでは画像が以下のように表示されてしまいます。

私が実現したいことのイメージは下記のようなイメージになります。

どうすれば画像の大きさが文字に被らなくなるでしょうか。知恵を貸していただけると嬉しいです。
どうぞよろしくお願いいたします。

HTML
1
2<!DOCTYPE html>
3<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
4<!-- JS, Popper.js, and jQuery -->
5<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
6<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
7<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
8
9<link rel="stylesheet" href="/css/entire.css">
10<link rel="shortcut icon" href="image.png">
11
12
13<body>
14	<div class="container">
15		<div class="row">
16			<div class="col-12"></div>
17			<div class="col-12"></div>
18		</div>
19
20
21	<div class="row ">
22			<div class="col-lg-4 col-sm-12">
23							 <img  class="img-book mx-auto d-block" src="/book2020a/image/
24							書籍登録画面.png" >
25					    
26	</div>
27
28			<div class="col-lg-8 col-sm-12">
29				<table class="table">
30  			<tbody >
31
32			<tr class="row">
33      			<th class="col-3" >書籍名</th>
34      			<td class="col-9">ディス・イズ・ブック</td>
35    		</tr>
36
37			<tr class="row">
38      			<th class="col-3" >出版社</th>
39      			<td class="col-9">本本出版</td>
40    		</tr>
41
42			<tr class="row">
43      			<th class="col-3" >著者</th>
44      			<td class="col-9">本田太郎</td>
45    		</tr>
46
47			<tr class="row">
48      			<th class="col-3" >メインジャンル</th>
49      			<td class="col-9">コンピュータ・IT</td>
50    		</tr>
51
52			<tr class="row">
53      			<th class="col-3" >サブジャンル</th>
54      			<td class="col-9">入門書</td>
55    		</tr>
56
57			<tr class="row">
58      			<th class="col-3" >発行日</th>
59
60      		
61			
62
63      			<td class="col-9">2020-06-01</td>
64    		</tr>
65
66			<tr class="row">
67      			<th class="col-3" >価格</th>
68      		
69      			<td class="col-9 text-right">￥123,456</td>
70    		</tr>
71
72	 		<tr class="row">
73      			<th class="col-3" >冊数</th>
74      			<td class="col-9 text-right">123</td>
75    		</tr>
76
77    		<tr class="row">
78      			<th class="col-3" >内容</th>
79      			<td class="col-9">あいうえおかきくけこさしすせそ</td>
80    		</tr>
81
82  		</tbody>
83	</table>
84</div>
85</div>
86</div>
87	<div class="container">
88		<div class="row">
89			<div class="col-12">
90
91			<form method="POST" action="BookListDisp">
92				<button type="submit" class="btn btn-outline-success migi">戻る</button>
93			</form>
94
95			</div>
96		</div>
97	</div>
98</body>

CSS
1@charset "UTF-8";
2
3.img-logo{
4
5	width:auto;
6	height:45px;
7}
8
9body{
10	background-color:light;
11	padding-top:50px;
12	height:5000px;
13}
14.badge-scarlet{
15	background-color:#ff0033;
16}
17.btn-scarlet{
18	background-color:#ff0033;
19}
20
21.btn-col{
22
23}
24.iti{
25	float:right;
26
27}
28
29.white{
30	color:black;
31}
32
33h1{
34    font-family:sans-serif;
35}
36.hover:hover { color: #000 !important; }
37.bg-col{
38	background-color:#dee2e6;
39}
40.table{
41
42	margin-left:auto;
43	margin-right:auto;
44}
45
46html{
47     height: 100%;
48}
49#wrap{
50     width: 100%;
51     position: relative;
52     min-height: 100%;
53}
54#contents{
55     padding-bottom: 50px;  /* フッターの高さと同じ */
56}
57#footer{
58	width:100%;
59    height: 50px;
60    position: absolute;
61    bottom: 0;
62    color:white;
63}
64
65.pagination > .active > a
66{
67color: white;
68background-color: #868e96 !Important;
69border: solid 1px #868e96 !Important;
70}
71
72
73.migi{
74	float:right;
75}

Lhankor_Mhy

2020/08/28 04:12

「画像の大きさにかかわらず」とのことですが、画像の大きさが10000pxでスクリーンサイズが320pxの場合、どうしますか？

ypk

2020/08/28 04:59

その場合でも、画像の大きさはスクリーンのサイズに合わせて縮小してほしいですね、、、左のブロック内に画像は収めたいです。

Lhankor_Mhy

2020/08/28 05:59

であれば、nelpesicaさんのご回答の通りです。

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

回答1件

ベストアンサー

css
1.img-book {
2  width: 100%
3}

これで画像サイズをブロックの大きさまで自動調節できます。

投稿2020/08/28 04:12

nelpesica

総合スコア159

ypk

2020/08/28 04:58

ご回答ありがとうございます。 .img-book { width: 100% } を早速CSSに追加してみましたが残念ながら画像の大きさが変更されません。ただ追記するだけではだめなのでしょうか？もう少し、詳しく教えていただけると嬉しいです。どうぞよろしくお願いいたします。

nelpesica

2020/08/28 06:00

<div class="col-lg-4 col-sm-12"> <img class="img-book mx-auto d-block" src="/book2020a/image/書籍登録画面.png" > </div> このdivの中にあるimgの横幅を可変にしたいので、imgタグに対してwidth:100%をあてます。ブラウザの開発ツールを開いて.img-bookに対してwidth:100%を記述してみてください。

ypk

2020/08/28 06:38

皆さんありがとうございます。残念ながら、私のCSSに記述をしても反映がなされなかったのでHTMLに <style> img.img-book.mx-auto.d-block { width: 100%; height: 100%; } </style> と記述をしてみたところ無事に写真の大きさを変更することができました。ありがとうございました。今後ともよろしくお願いいたします。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

画像の大きさに関わらず画像の大きさが文字に被らないよう自動調整できるようにしたい

関連した質問