以下のような、.img-wrapper は縦横比3:4を維持してレスポンシブな外枠、
その中の画像を外枠にフィットさせたい場合は以下のようにします。
<div class="img-wrapper">
<img src="photo.jpg" class="object-fit-img" />
</div>
.img-wrapper {
position: relative;
width: 100%;
}
.img-wrapper:before {
content:"";
display: block;
padding-top: 75%; // 3÷4×100です。
}
.img-wrapper img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
補足
IE10/11とEdgeでは、object-fit: cover; が効かないそうなので、
object-fit-images (ofi.js) を利用します。その場合CSSは
.img-wrapper img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;' //これを追加
}
object-fit-images (ofi.js) の使い方は以下を参照
https://www.webcreatorbox.com/tech/object-fit
2018年5月31日木曜日
2018年5月29日火曜日
2018年5月28日月曜日
2018年5月25日金曜日
2018年5月23日水曜日
ブラウザをリロードしてもCSSやJSが反映されないとき
サーバー側のApache設定ファイル httpd.confに以下を追加します。
EnableMMAP Off
EnableSendfile Off
例
<Directory "/var/www/html">
EnableMMAP Off
EnableSendfile Off
</Directory>
静的ページの更新がキャッシュのせいでできないとき、サーバ側とブラウザ側のどっちを見るべきか - Qiita
https://qiita.com/itsumoonazicode/items/ad5c8017e9285868547e
EnableMMAP Off
EnableSendfile Off
例
<Directory "/var/www/html">
EnableMMAP Off
EnableSendfile Off
</Directory>
静的ページの更新がキャッシュのせいでできないとき、サーバ側とブラウザ側のどっちを見るべきか - Qiita
https://qiita.com/itsumoonazicode/items/ad5c8017e9285868547e
縦横比を一定にするCSS
CSSだけでアスペクト比を固定するテク
https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d
img
HTML
<img src="http://mrg.bz/Gl2K6Z" />
CSS
img {
width: 100%;
height: auto;
}
divやpなどのブロック要素の場合
HTML
<div id="wrapper">
<div id="content">hogehoge fugafuga</div>
</div>
CSS
#wrapper {
position: relative;
width: 100%;
}
#wrapper:before {
content:"";
display: block;
padding-top: 75%; /* 高さを幅の75%に固定 */
}
#content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
高さの比率 ÷ 幅の比率 × 100
上の例では4:3 3/4*100で75
iframeの場合
HTML
<div id="wrapper">
<iframe id="content" src="https://player.vimeo.com/video/98746172"
frameborder="0"></iframe>
</div>
CSS
#wrapper {
position: relative;
width: 100%;
}
#wrapper:before {
content:"";
display: block;
padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d
img
HTML
<img src="http://mrg.bz/Gl2K6Z" />
CSS
img {
width: 100%;
height: auto;
}
divやpなどのブロック要素の場合
HTML
<div id="wrapper">
<div id="content">hogehoge fugafuga</div>
</div>
CSS
#wrapper {
position: relative;
width: 100%;
}
#wrapper:before {
content:"";
display: block;
padding-top: 75%; /* 高さを幅の75%に固定 */
}
#content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
高さの比率 ÷ 幅の比率 × 100
上の例では4:3 3/4*100で75
iframeの場合
HTML
<div id="wrapper">
<iframe id="content" src="https://player.vimeo.com/video/98746172"
frameborder="0"></iframe>
</div>
CSS
#wrapper {
position: relative;
width: 100%;
}
#wrapper:before {
content:"";
display: block;
padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
2018年5月16日水曜日
2018年5月15日火曜日
2018年5月9日水曜日
登録:
投稿 (Atom)