Help us understand the problem. What is going on with this article?

【CSS】レスポンシブでも使える!CSSだけで画像を縮小してトリミングしたサムネイルを表示する方法

More than 3 years have passed since last update.

はじめに

縦長の画像と横長の画像が混在する場合は、見た目が良くないです^^;
表示する画像が横長で統一されている、または縦長で統一されているなら、使える方法かと思います。
最初にCSSなど余分なものを除いたサンプルコードを紹介し、その後に詳しい解説をします。

サンプルコード

サンプルコード(画像の横幅を基準に表示するver)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
.photo {
    width:250px;
    height:150px;
    overflow:hidden;
    position:relative;
    border:1px solid #333;
}
.photo img {
    position: absolute;
    left: -100%;
    right: -100%;
    margin: auto;
    width: 100%;
    height: auto;
}
</style>
</head>
<body>
<div class="photo"><img src="画像のパス"></div>
</body>
</html>

.photoで画像を表示するサイズを指定しています。
今回は、widht:250px;height:150px; と指定しておりますが、可変でもOKです。

.photo imgwidth: 100%;height: auto; としているため、画像の横幅を基準に表示します。
画像の縦幅を基準にしたいなら、.photo imgwidth: auto;height: 100%; と変更すればOKです。

今回の方法を解説

用意した画像

1.png

ご覧の通り、横長2枚、縦長2枚の計4枚の画像で、それぞれ比率が違います。
今回の方法だとどのように表示されるか見ていきましょう。

画像の横幅を基準にする(表示する画像は全て横長)

2.jpg

最初のサンプルコードの場合だと、上図のように画像の横幅を基準に表示されます。
比率が違くても、全て横長の画像で統一されていれば、許容される範囲(人によるけど)で、自動で画像を縮小し、トリミングして表示されます。

補足

どのようになっているのか、わかりやすくするために.photooverflow:hidden;を外して、画像を透過にしてみました。

3.jpg

ご覧のように.photoの縦横サイズに入らない部分は表示されなようになっております。
そのため、はみ出した画像の一部は表示されません。

画像の横幅を基準にする(表示する画像は横長と縦長が混在)

4.jpg

この場合は、画像の横幅を基準にしているため、縦長の画像の一部は表示されません。
表示はされますが、トリミングの位置が微妙ですね^^;

画像の縦幅を基準にする(表示する画像は全て縦長)

5.jpg

表示を縦長サイズにし、画像も縦幅を基準にすることも可能です。
サンプルコードのところで、説明しましたが、.photo imgwidth: auto;height: 100%; と指定すれば、画像の縦幅を基準に表示します。
表示サイズを縦長にしたいなら、.photoの縦横サイズを変更してください。

最後に

新しいCSSプロパティは使用していないので、ほとんどのデバイスで問題なく表示されると思います(たぶん)。

JavaScriptについて詳しくないので、できるかわかりませんが、画像の縦横の比率を取得して、付与するCSSを変えれば、両方に対応した表示が可能かと思います。

他の方法は、【図解】CSSだけで画像の縦横比を維持したサムネイルを表示するが参考になると思います。

CSSの記述でこのようにした方が良いなどアドバイスあれば、ご助言くださいm(__)m

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away