webサイト上の画像を半分で設置させたい

架空のブランドサイトを作成しています。

<div class="About">内のコンテナ内の右半分にフルサイズで画像を表示させたいのですが、コードの記述がわからず、詰まってしまっています。

background-size: 70px;

サイズのの記述を使い試してみましたが、大きさに特に変化は現れませんでした。

どなたかご教授頂きたい所存です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>ブランドサイト</title>
6        <link href="css/style.css" rel="stylesheet">
7    </head>
8
9	<body>
10   <header>
11    <div class=""></div>
12     <ul>
13      <li class="lo">Home</li>
14      <li class="lo">About</li>
15      <li class="lo">Product</li>
16      <li class="lo">Online Store</li>
17      <li class="lo">NEWS</li>
18     </ul>
19   </header>
20   <div class="container">
21     <div class="main">
22      
23     </div>
24     <div class="consept">
25       <h1>おいしさ際立てる、美しさ</h1>
26       <p>○○県○○市、この地域に構える○○店。
27          様々な料理に合わせたお皿を提供し、料理のおいしさ、美しさを引き立てます。
28
29          
30
31       </p>
32     </div>
33     <div class="About">
34       <h3>About</h3>
35        <p></p>
36        <img src="35531127.jpg">
37      </div>
38     <div class="purodakut">
39      <h3>Product</h3>
40
41     </div>
42     <div class="Online"></div>
43     <div class="news"></div>
44    <footer></footer>
45   </div>
46	</body>
47</html>
48

CSS
1body{
2  margin: 0;
3  padding: 0;
4}
5
6
7ul{
8  text-align:right;
9  padding-right:500px;
10  padding-top:20px;
11}
12
13li{
14  display: inline;
15}
16
17.lo{
18  padding:0px;
19  margin-right: 30px;
20}
21
22li:hover{
23  opacity: 0.5;
24}
25
26li{cursor: pointer}
27
28.main{
29  height: 80vh;
30  background-size:cover;
31  background-image: url(..//tom-chen-6DH6BojClJg-unsplash.jpg);
32}
33
34.consept{
35text-align: center;
36}
37
38.About{
39  text-align:right;
40}
41
42.About h3{
43  text-align:left;
44}
45
46img{
47  background-size: 300px;
48  
49}
50
51.purodakut{
52text-align: center;
53}

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

回答1件

ベストアンサー

こういうことですか？

CSS
1.About img{
2  width: 50%;
3}

投稿2021/06/07 00:30

itagagaki

総合スコア8402

HdNu

2021/06/09 04:03

回答いただきありがとうございます。回答が遅くなってしまい大変申し訳ございません。無事半分に分けることができました。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.47%

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

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

質問する

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

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

webサイト上の画像を半分で設置させたい

関連した質問