画像の大きさを維持したまま、横の長さを伸ばしたい

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

Aboutの文字隣の画像を、大きさを維持したまま、横の長さを伸ばすために、widthの数値を増やし、横に広げようと試みたのですが、横に広がると同時に画像も拡大してしまいます。

max-widthを使用すれば、画像の大きさを維持したまま画像の幅を調整できるとの情報を見つけ、試してみたのですが結果は変わりませんでした。

どなたか方法ご存じありませんでしょうか？

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       </p>
30     </div>
31     <div class="About">
32       <h3>About</h3>
33        
34        <img src="plate-526603_1920.jpg">
35      </div>
36     <div class="purodakut">
37      <h3>Product</h3>
38      <p>kakakakaka</p>
39      <img src="niz0025-066.jpg">
40
41     </div>
42     <div class="Online"></div>
43     <div class="news"></div>
44    <footer></footer>
45   </div>
46	</body>
47</html>

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  background-color:rgb(243, 240, 235);
40  height: 500px;
41}
42
43.About h3{
44  display: inline-block;
45  margin-top: 70px;
46}
47
48.About img{
49  max-width: 50%;
50  float: right;
51}
52
53
54.purodakut{
55text-align: center;
56}
57
58
59.purodakut p{
60  text-align: left;
61}
62
63
64.purodaku img{
65  float:right;
66}
67

上画像が修正前
下がmax-widthを70％に変更した後の画像になります。

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

回答2件

ベストアンサー

.About img{
  width: 70%;
  height: 100%;

で良くないですか？

投稿2021/06/11 14:31

itagagaki

総合スコア8402

HdNu

2021/06/13 00:41

回答いただきありがとうございます。解決いたしました。

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

IEは非対応で良ければ、object-fit: cover; か object-fit: none; でいかがでしょうか？
object-fit - MDN

補足：max-width は最大幅を指定するものです。

投稿2021/06/11 12:24

takna

総合スコア784

HdNu

2021/06/13 00:36

回答いただきありがとうございます。上記の記述を試してみましたが、特に変化は起きませんでした。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

画像の大きさを維持したまま、横の長さを伸ばしたい

関連した質問