画像が原寸よりも拡大されて表示される

画像が引き延ばされて表示される

縦・横500pxの正方形を画像が原寸よりも引き延ばされて表示されてしまいます。

.jigazo img{
  height:500px;
  width:500px:
}

といった具合に直接指定したり、原寸画像のサイズを変更するなどしましたが引き延ばされたまま画質だけが粗くなってしまいました。
reset.cssに原因が有るのか分からないのですが、メインビジュアルはちゃんとしたサイズで表示されたので原因がわからないので対処法を教えていただけないでしょうか。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title></title>
        <link rel="icon" type="images/png" href="">
        <meta name="" content="">
        <!-- CSS -->
        <link href="css/style.css" rel="stylesheet">
        <link href="css/reset.css" rel="stylesheet">
    </head>
    <body>
        <div id="personal" class="inner">
            <header>
               
            </header>
            <main>
                <div class="jigazo">
                    <img src="img/jigazo.jpg">
                        </div>
            </main>
        </div>
    </body>

@charset "UTF-8";
/* 共通 */
body{
    background-color: #6875FF;
}
header{
    background-color:#343399 ;
}
.inner{
    max-width: 1366px;
    margin: 0 auto;
}
li a{
    text-decoration: none;
    color: black;
}
img{
    max-width: 100%;
    min-width: 700px;
    height: auto;
}
/* index */
header{
    height: 100px;
}
.page_title{
    display: block;
    padding-left: 70%;   
}
.page_title p{
    font-size: 4rem;
}
main{
    display: flex;
}
.g_nav ul{
    width: 300px;
    height: auto;
    background-color:#343399 ;   
}
.g_nav ul li{
    padding-top: 20%;
    padding-bottom:20% ;
    text-align: center;

}
.g_nav ul li a{
    font-size: 2rem;
}

/* personal */

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

回答2件

ベストアンサー

下記でimgのサイズを設定してますので、そのサイズになります。

css
1img{
2    max-width: 100%;
3    min-width: 700px;
4    height: auto;
5}

これを削除すれば画像の原寸で表示されます。

投稿2020/05/31 08:29

hatena19

総合スコア34075

natsu_kawa

2020/05/31 08:51

メインビジュアルをウィンドウに合わせたいのでそうしていたんですが外して、メディアクエリで変わるようにした方が良いでしょうか…

natsu_kawa

2020/05/31 09:00

max-width: 100%;のみにすれば解決しました、 min-widthが画像を引き延ばしていたようです。

hatena19

2020/05/31 09:46

> メインビジュアルをウィンドウに合わせたいのでそうしていたんですがそういうことなら、メインビジュアルに id を付加して、id名.img をセレクタにして max-width と min-width を設定すればいいと思います。 img に設定してまうと、すべてのimgに影響を与えてしまいますので。

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

cssではなくimgのwidthとheightを直接タグに属性として記述してみてください

投稿2020/05/31 08:01

yambejp

総合スコア116724

natsu_kawa

2020/05/31 08:08

試したんですが変化無いようです <img src="img/jigazo.jpg" height="300px" width="300px">

yambejp

2020/05/31 08:10

pxはいりません、それとcssの設定は確実にはずしてください

natsu_kawa

2020/05/31 08:15

<img src="img/jigazo.jpg" height="300" width="300"> pxを外して更新しましたが変化が無かったです… 該当ページ部分のCSS /* personal */ #personal header{ height: 70px; line-height: 70px; } のみなので、画像にはかかっていないと思います。

natsu_kawa

2020/05/31 08:19

共通ページでmain部分を display:flex;にしているのが問題なのでは、と思い該当ページでnoneで打ち消してみたのですがそうすると画像ごと消えてしまいました(--;)

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

あなたの回答