Q&A現在は元の画像のアスペクト比を保ったままレスポンシブ表示されるようになっていますが、横長の画像(1920x1080px)と縦長の画像(1080x1920px)をどちらも同じサイズ(1280x720px)に統一してレスポンシブ表示にしたいです。
以下を指定するとブラウザ幅がMAXの時は理想通りになります。
max-width: 1280px;
max-height: 720px;
object-fit: cover;
このままの形でレスポンシブ表示ができればベストなのですが…。
html
1<div class="images-wrap"> 2<span class="image-wrap"> 3<a href=""> 4<img src="" width="1920" height="1080"></a> 5</span> 6<span class="image-wrap"> 7<a href=""> 8<img src="" width="1080" height="1920"></a> 9</span> 10</div> 11} 12※プラグインから出力されるコードなので変更できません。
css
1.image-wrap{ 2 display: inline-block; 3 vertical-align: top; 4 width: 100%; 5 height: auto; 6}
回答1件
0
自己解決
以下のサイトに載っている方法で画像が入っている親要素のアスペクト比を固定することで解決できました。
投稿2020/04/19 02:31
総合スコア7
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。