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

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

ただいまの
回答率

87.37%

画像を画面の幅に対して中央に端が切れずに配置したい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,485

score 10

前提・実現したいこと

テンプレート
↑のテンプレートを利用して、高さを固定、幅を自動にした写真を画面の中央に配置し、スマホで見た時にも画像が切れずに表示されるようにしたい。

発生している問題・エラーメッセージ

<style type="text/css">
#photo {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    text-align: left;
    overflow: hidden;
    position: relative;
}

#photo img {
    top: 0;
    left: 0;
    position: absolute;
}
</style>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
    var setImg = '#photo';
    var fadeSpeed = 1600;
    var switchDelay = 5000;

    $(setImg).children('img').css({opacity:'0'});
    $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

    setInterval(function(){
        $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
    },switchDelay);
});
</script>
<div id="photo">
<img src="gazou1.jpg" width="500" height="300" alt="">
<img src="gazou2.jpg" width="500" height="300" alt="">
<img src="gazou3.jpg" width="500" height="300" alt="">
<img src="gazou4.jpg" width="500" height="300" alt="">
</div>

元のものは↑で、これを横幅を固定、縦幅はautoというものは画像が中央に配置され、問題なく表示されましたが、縦幅を固定、横幅はautoにするとスマホで見た時に右端が切れて表示されています。

該当のソースコード

<style type="text/css">
#photo {
   max-width: auto;
   height: 400px;

  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  position: relative;
}
#photo img {
  width: auto;
  height: 100%;
}
#photo img:not(:first-child) {
  top: 0;
  left: 0;
  position: relative;
}
</style>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
    var setImg = '#photo';
    var fadeSpeed = 1600;
    var switchDelay = 6000;

    $(setImg).children('img').css({opacity:'0'});
    $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

    setInterval(function(){
        $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
    },switchDelay);
});
</script>
<div id="photo">
<img src="gazou1.jpg" width="auto" height="400">
<img src="gazou2.jpg" width="auto" height="400">
<img src="gazou3.jpg" width="auto" height="400">
<img src="gazou4.jpg" width="auto" height="400">
</div>

↑に載せている画像の本来の大きさは
1枚目 3264×2448
2枚目 1000×794
3枚目 857×584
4枚目 631×484
になります。

当初、横を500pxで縦をautoの設定にしていた時はスマホの画面で見ても、写真の右端が切れることはなかったのですが、横をautoにして縦を400pxに切り替えたところ、スマートフォンで見た時に写真の右端が切れて表示されるようになってしまいました。

試したこと

#photo img {
  width: auto;
  height: 100%;
}


の高さを400pxに指定してみたりはしましたが、右端が切れる現象は変わりませんでした。

12月31日9時現在のタグに修正しました。
2つのページで使おうと思っていまして、全く同じタグなのですが、1つのページでは写真が中央に配置され、スマホの画面で見ても右端は切れていないのですが、もう1つのページでは写真の右端が切れているので、右端が切れている方のタグを掲載しました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hatena19

    2019/12/31 01:43

    実際の画像の縦横は何pxか質問に追記してください。

    キャンセル

回答 1

checkベストアンサー

+2

画像が左寄せになるのは、max-width: auto; が原因です。max-widthには数値を設定する必要があります。autoとは設定できないので無効になってます。widthの指定がないので画面幅(親要素幅)まで広がります。
HTMLのwidth="auto"も数値で指定する必要がありますので無効です。

スマホサイズでも画像が見切れないようにするには、画面幅に合わせて画像を縮小する必要があります。
一番横長の画像の縦横比に合わせて#photoの最大幅、最大高を設定して、画面幅が最大幅より小さくなったらそれに合わせてサイズを縮小する設定にする必要があります。これは単位をvwで設定するといいでしょう。

画像の中央揃えはtext-align: center;で。

上記を考慮してCSS部分を下記のように設定すればどうでしょうか。

#photo {
  width: 100vw;
  max-width: 485px;
  height: 68vw;
  max-height: 330px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
#photo img {
  width: auto;
  height: 100%;
}

動作確認用サンプル

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/31 12:14 編集

    hatena19さま
    いつもアドバイスをありがとうございます。
    cssを下記のように変更してみました。
    全て横長の写真なのですが、スマホ側で見ると画像が伸びて縦長になってしまうのは、数字の設定が良くないということなのでしょうか?
    引き続き数字を変えて試していきたいと思います。

    ---css---
    #photo {
    width: 100vw;
    max-width: 480px;
    height: 68vw;
    max-height: 400px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    }
    #photo img {
    width: auto;
    height: 100%;
    }

    max-width: 480px;の「480」は利用しているサイトのスタイルシートに最大480pxと設定しているためです。
    ---css---
    @media only screen and (max-width: 480px){
    #header .logo{padding-top:10px;}
    .info{padding:10px 0 0;}
    ul#topnav li{width:50%;}

    ul#topnav li:nth-child(3n){
    border-right:1px solid #6c272d;
    width:50%;
    }
    ul#topnav li:nth-child(2n),ul#topnav li:nth-child(6n){border-right:0;}
    #mainBanner h2,#mainBanner h3{font-size:80%;}
    }

    パソコン側で見た時はできるだけ大きく(集合写真を掲載しています。)見えるようにしたく、スマートフォンで見た時は縦型で見た時に画像が切れたり、スクロールすることなく表示されるように…と思っているのですが、これは質問を変えて改めた方が良いでしょうか?

    キャンセル

  • 2019/12/31 18:34

    「利用しているサイトのスタイルシート」というのが何か分かりませんが、
    質問の画像を表示するセクションがスマホでもPCでもワンカラムなら無視していいと思います。
    質問で提示されている画像の一番横長の縦横比を元に max-height max-width height width を決めてください。サンプルのサイズが希望と異なるなら、縦横比は同じになるように修正してください。

    もし、スマホでは1列、タブレット、PCでは2列というようにレイアウトが変わるなら、質問の質が全く異なってきますので、別に質問しなおすことになります。

    また、今回の場合、各画像の縦横比がそれぞれ異なるのが難しくしている原因です。画像を編集して縦横比を固定することはできないですか。

    キャンセル

  • 2020/01/01 10:17

    hatena19さま
    いつもありがとうございます。
    確かに画像の縦横を揃えれば特に問題はないのだと思いますが、いろいろな人が撮った集合写真を掲載するにあたり、縦横比を固定すると人物が切れてしまうのと、当初は横幅を固定して、縦幅が写真の大きさによって動くようにしていたのですが、写真の真下にある文章が写真が切り替わる度に上がったり下がったりしているため、高さを固定して横幅が動けば問題が解消するかと思い質問させて頂きました。

    VW値等、実は初めて知ったので、検索して勉強したりもしたのですが、うまく設定できていないようなので、改めて勉強し直してから再チャレンジしたいです。

    ありがとうございました。

    キャンセル

  • 2020/01/01 11:10

    画像の縦横比が様々で高さを固定すれば、横幅は変化します。
    予想される一番横長の縦横比を基準に max-height max-width height width を設定してください。一番横長の画像以外は左右に空白でできますが、高さ固定にする場合は避けようがありません。

    キャンセル

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る