お世話になります。
うまくいった画面といかなかった画面の該当箇所をソースを調べて比較しました。
1:うまくいった時 投稿ページの詳細ページのCSS該当部分
.img-responsive { display: block; max-width: 100%; height: auto; } img { width: 100%; height: auto; } img { vertical-align: middle; } img { border: 0; } { overflow-wrap: break-word; } { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img[Attributes Style] { width: 2000px; height: 1200px; }
2うまくいかなかった時
element.style { background-image: url(http://waww.wp.xdomain.jp/wp-content/uploads/2019/07/0001.jpg); } main .wrap .thumbnail a { width: 100%; height: 300px; } .thumbnail a { position: relative; display: table; width: 100%; height: 100px; background-size: cover; background-position: center center; background-repeat: no-repeat; } a { color: #337ab7; text-decoration: none; } a { background-color: transparent; } * { overflow-wrap: break-word; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
実際にソースを変えてためしたこと
そこで違いである以下をためしましたが画面は変わりませんでした。
.img-responsive { height: auto;
どのようにすれば詳細ページの画像と同じ挙動をトップページでも実施する事ができるのでしょうか?
トップページで画像を全て表示させレスポンシブでも全ての画像位置を表示させたいです。
つまり画像表示において詳細ページと同じ挙動をトップページでもさせたいです。
どうぞよろしくお願いいたします
回答1件
あなたの回答
tips
プレビュー