プラグイン > バグ報告・利用に関する質問 > 商品詳細画面で縦横比が違う商品画像の並びが不均等になる |
バグ報告・利用に関する質問
フラット表示 | 前のトピック | 次のトピック |
投稿者 | スレッド |
---|---|
yamasyo |
投稿日時: 2019/2/18 17:35
対応状況: 解決済
|
新米 登録日: 2016/2/24 居住地: 投稿: 9 |
Re: 商品詳細画面で縦横比が違う商品画像の並びが不均等になる 下記のように記載したら解決しました。
.item_photo { background: #cccccc; display: block; margin: 0 0 8px; text-align: center; padding-top: calc(100% * 3 / 4); position: relative; } .item_photo img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:auto; height:auto; max-width:100%; max-height:100%; } 高さを幅の3/4倍に固定したかったので、解決方法として、padding-topに幅の3/4倍を指定しました。 (※paddingの%は幅を基準にしているため) 後は、absoluteを指定して、中央に配置するように設定すれば上手く意図しているように表示できました。 参考サイト ■CSS で横幅に対するアスペクト比の四角形にする http://var.blog.jp/archives/68893886.html ■要素を上下左右の中央に配置・・・ https://coliss.com/articles/build-websites/operation/css/absolute-centering-with-css.html 回答頂きありがとうございましたm(__)m |
フラット表示 | 前のトピック | 次のトピック |
題名 | 投稿者 | 日時 |
---|---|---|
商品詳細画面で縦横比が違う商品画像の並びが不均等になる | yamasyo | 2019/2/10 20:38 |
Re: 商品詳細画面で縦横比が違う商品画像の並びが不均等になる | nyorai | 2019/2/12 10:21 |
Re: 商品詳細画面で縦横比が違う商品画像の並びが不均等になる | yamasyo | 2019/2/12 16:44 |
» Re: 商品詳細画面で縦横比が違う商品画像の並びが不均等になる | yamasyo | 2019/2/18 17:35 |