https://teratail.com/questions/53013?whotofollow=
の続き
SPのほうは上記で問題なくできたのですが、
今度はPCサイズで、画像が親要素からはみ出る問題が起きました。
positionでなければoverflow:hidden;で隠せば問題ないですが、positionなので使うとすべて消えてしまいます。
おそらくすべてはみ出ていると判断されるのでしょう。
それならjqueryでと思って下記のようにしたのですが、やはり縦幅が親をはみ出て、しかもアスペクト比がおかしくなります。
var parentHeight = $('.split-screen-inner-secondly').height();
if($(window).width() > 768) {
$(".slide__item").height(parentHeight);
}
理論上は.slide__itemマイナス.split-screen-inner-secondlyの値Xを使いその後
.slide__itemマイナスXして
その結果を.slide__itemの高さにすればいいのかなと思いますが、それで縦幅のサイズがぴったりになっても、
結局縦のフルイドイメージはないのでこれでもアスペクト比がおかしくなりますよね。
どのように解決できるのでしょうか?
・
うまくお伝えできずに恐縮ですが、スライドショーの画像のアスペクト比がおかしくなるのではなく、スライドショーとその親のボックスのアスペクト比が同じでないので、
横幅、縦幅親ボックスと同じサイズにしてしまうと、画像のアスペクト比がおかしくなるのでどうしたらいいですかということです。
背景だと、background:cover;でぴったりになってくれますよね。
imgでもそのようなことはできないのでしょうか?
//ある要素の高さをある要素と同じ高さにする-768以下
$(window).load(function(){
var parentHeight = $('.slide__item').height();
if($(window).width() < 768) {
$("#slide").height(parentHeight);
}
//ある要素の高さをある要素と同じ高さにする-768以上
var parentHeight = $('.split-screen-inner-secondly').height();
var parentWidth = $('.split-screen-inner-secondly').width();
if($(window).width() > 768) {
$(".slide__item").height(parentHeight).width(parentWidth);
}
})
これで画像のサイズを親要素ぴったりにはできました。
ただレスポンシブな親要素の縦横比と画像のアスペクト比が常に一緒なわけがないので、
PCのサイズの時に画像が横に引き伸ばされて、おデブな画像になってしまいます。
・理論上は
スライドショーの画像のサイズをwidth110%、height150%などアスペクト比を維持したまま、わざとはみ出るサイズにして、そこからマイナス親要素のサイズをすることで、はみ出ているサイズが、例えばwidth10%、height20%とでてきます。
このサイズを左上からでなく、真ん中を起点にして外側からかくしてやれば、overflow:hiddenで隠したのと理論所同じになると思っています。
ただこんなことをレスポンシブで再現するなどjqueryでできるのでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/31 10:04
退会済みユーザー
2016/10/31 10:07
2016/10/31 10:08
2016/10/31 10:23
退会済みユーザー
2016/10/31 11:58
退会済みユーザー
2016/10/31 12:22
2016/11/01 01:56
退会済みユーザー
2016/11/01 02:26