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

Question

前提・実現したいこと

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

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

<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つのページでは写真の右端が切れているので、右端が切れている方のタグを掲載しました。

Comments

[hatena19]

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

Answer 1

画像が左寄せになるのは、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%;
}

動作確認用サンプル

Comments

[wally]

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%;}
}

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

[hatena19]

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

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

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

[wally]

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

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

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

[hatena19]

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