画像（img） – 基本設定

https://www.rural-web.com/coding/2583

2019/10/17

はじめに

本記事について

本記事は、【画像<img>】に関する表示方法についてまとめたものです。
利用できる方は、お好きに活用してください。

当サイトで公開している「ruralweb.css（準備中）」をご自身のサイトに読み込ませておけば、各サンプルに指定されているクラスを挿入するだけで再現できることを目標にしています。もし個々に利用する場合は、各サンプルのソースをコピペしてご利用ください。

検証ブラウザ・OS

サンプル内容につきましては、最新ブラウザ・OS（IE/Chrome/Safari/FireFox/iOS/Android）で検証しております。基本的にIE9以下などのブラウザでは検証しておりませんが、たまに適用していたり説明してあるところは仕事でやむなく対応した時のものです。

注意事項

自身の仕事効率化を目的としていますので、表示・不具合等による損失につきまして一切の補償をいたしませんのでご理解ください。但し、公開しているサンプル内容の修正・改善はできる限りしていきますので、お気づきの点がございましたらTwitterよりご連絡ください。

コードサンプル

基本設定

.rw-img

クラス名

rw-img

説明

画像をレスポンシブ化
max-width:800pxに設定。幅に制限かけないならnoneに切り替える

コードを表示

<div class="rw-img">
	<img src="img/image.jpg" alt="サンプル画像" />
</div>

.rw-img {
	position:relative;
	margin:0 auto;
	overflow:hidden;
	max-width:800px;
}
.rw-img > img{
	display:block;
	width:100%;
}

最終更新：2019.10.17

キャプション

.rw-caption

サンプルキャプション

クラス名

rw-caption

説明

rw-imgの子要素にrw-captionを付与することで、キャプション（注釈）を設定
<figure>を利用するのであれば、<figcaption>にクラス付与

コードを表示

<div class="rw-img">
	<img src="img/image.jpg" alt="サンプル画像" />
	<p class="rw-caption">サンプルキャプション</p>
</div>

.rw-caption {
	margin:0;
	padding:0;
}

最終更新：2019.10.17

.rw-caption-in-top

サンプルキャプション

クラス名

rw-caption-in-top

説明

rw-imgの子要素にrw-caption-in-topを付与することで、キャプション（注釈）を画像内の上段に表示
<figure>を利用するのであれば、<figcaption>にクラス付与

コードを表示

<div class="rw-img">
	<img src="img/image.jpg" alt="サンプル画像" />
	<p class="rw-caption-in-top">サンプルキャプション</p>
</div>

.rw-img {
	position:relative;
	margin:0 auto;
	overflow:hidden;
	max-width:800px;
}
.rw-img > img{
	display:block;
	width:100%;
}
.rw-caption-in-top {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: left;
    font-size: initial;
    color: #fff;
    padding: 0 15px;
}

最終更新：2019.10.17

.rw-caption-in-center

サンプルキャプション

クラス名

rw-caption-in-center

説明

rw-imgの子要素にrw-caption-in-centerを付与することで、キャプション（注釈）を画像内の中央に表示
<figure>を利用するのであれば、<figcaption>にクラス付与

コードを表示

<div class="rw-img">
	<img src="img/image.jpg" alt="サンプル画像" />
	<p class="rw-caption-in-center">サンプルキャプション</p>
</div>

.rw-img {
	position:relative;
	margin:0 auto;
	overflow:hidden;
	max-width:800px;
}
.rw-img > img{
	display:block;
	width:100%;
}
.rw-caption-in-center {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    text-align: left;
    font-size: initial;
    color: #fff;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

最終更新：2019.10.17

.rw-caption-in-bottom

サンプルキャプション

クラス名

rw-caption-in-bottom

説明

rw-imgの子要素にrw-caption-in-bottomを付与することで、キャプション（注釈）を画像内の下段に表示
<figure>を利用するのであれば、<figcaption>にクラス付与

コードを表示

<div class="rw-img">
	<img src="img/image.jpg" alt="サンプル画像" />
	<p class="rw-caption-in-bottom">サンプルキャプション</p>
</div>

.rw-img {
	position:relative;
	margin:0 auto;
	overflow:hidden;
	max-width:800px;
}
.rw-img > img{
	display:block;
	width:100%;
}
.rw-caption-in-bottom {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    font-size: initial;
    color: #fff;
    padding: 0 15px;
}

最終更新：2019.10.17

.rw-caption-hover-top

サンプルキャプション

クラス名

rw-caption-hover-top

説明

rw-imgの子要素にrw-caption-hover-topを付与することで、画像にカーソルを合わせた時にキャプション（注釈）を画像内の上段に表示
<figure>を利用するのであれば、<figcaption>にクラス付与

コードを表示

<div class="rw-img">
	<img src="img/image.jpg" alt="サンプル画像" />
	<p class="rw-caption-hover-top">サンプルキャプション</p>
</div>

.rw-img {
	position:relative;
	margin:0 auto;
	overflow:hidden;
	max-width:800px;
}
.rw-img > img{
	display:block;
	width:100%;
}
.rw-caption-hover-top {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: left;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    padding: 0 15px;
    opacity:0;
    transition:opacity .2s;
}
.rw-img:hover .rw-caption-hover-top {
	opacity:1;
}

最終更新：2019.10.17

.rw-caption-hover-bottom

サンプルキャプション

クラス名

rw-caption-hover-bottom

説明

rw-imgの子要素にrw-caption-hover-bottomを付与することで、画像にカーソルを合わせた時にキャプション（注釈）を画像内の下段に表示
<figure>を利用するのであれば、<figcaption>にクラス付与

コードを表示

<div class="rw-img">
	<img src="img/image.jpg" alt="サンプル画像" />
	<p class="rw-caption-hover-bottom">サンプルキャプション</p>
</div>

.rw-img {
	position:relative;
	margin:0 auto;
	overflow:hidden;
	max-width:800px;
}
.rw-img > img{
	display:block;
	width:100%;
}
.rw-caption-hover-bottom {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    padding: 0 15px;
    opacity:0;
    transition:opacity .2s;
}
.rw-img:hover .rw-caption-hover-bottom{
	opacity:1;
}

最終更新：2019.10.17

.rw-caption-hover-all

サンプルキャプション

クラス名

rw-caption-hover-all

説明

rw-imgの子要素にrw-caption-hover-bottomを付与することで、画像にカーソルを合わせた時にキャプション（注釈）を画像内の全体中央に表示
<figure>を利用するのであれば、<figcaption>にクラス付与

コードを表示

<div class="rw-img">
	<img src="img/image.jpg" alt="サンプル画像" />
	<p class="rw-caption-hover-all">サンプルキャプション</p>
</div>

.rw-img {
	position:relative;
	margin:0 auto;
	overflow:hidden;
	max-width:800px;
}
.rw-img > img{
	display:block;
	width:100%;
}
.rw-caption-hover-all {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.35);
    color: #fff;
    padding: 15px;
    opacity:0;
    transition:opacity .2s;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.rw-img:hover .rw-caption-hover-all{
	opacity:1;
}

最終更新：2019.10.17

画像加工系

.rw-img-trim

クラス名

rw-img-trim

説明

画像をトリミング
初期設定ではmax-width:400px。状況に合わせて数値変更
正方形が前提だが、決め打ちするならrw-img-trimにwidthheightに追加指定も可

コードを表示

<div class="rw-img-trim">
	<img src="img/image.jpg" alt="サンプル画像" />
</div>

.rw-img-trim {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    max-width:400px;
}
.rw-img-trim::before {
    display: block;
    content: "";
    padding-top: 100%;
}
.rw-img-trim img {
    width: 150%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

最終更新：2019.10.17

.rw-img-circle

クラス名

rw-img-circle

説明

画像を丸くトリミング
初期設定ではmax-width:400px。状況に合わせて数値変更
画像の大きさを決め打ちするならrw-img-circleにwidthheightに追加指定も可

コードを表示

<div class="rw-img-circle">
	<img src="img/image.jpg" alt="サンプル画像" />
</div>

.rw-img-circle {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    max-width: 400px;
    border-radius: 50%;
}
.rw-img-circle::before {
    display: block;
    content: "";
    padding-top: 100%;
}
.rw-img-circle img {
    width: 150%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

最終更新：2019.10.17

更新履歴

更新日時	更新内容
2019.10.17	記事を作成