質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2710閲覧

positionで配置している画像が親要素からはみ出る問題が起きました。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/29 03:21

編集2022/01/12 10:55

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でできるのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

先日の方ですね。時間掛かってますね。

そもそも論で、よくあるページ内容なのに、ガリガリとjqueryでスタイルを定義する状況がどうかと思いますので、最初から定義やり直した方がいいのではないでしょうか。

どうしても突き進めたいのなら整理して計算するしかないと思います。
最後はCSSでcalc使って定義するしかないと思いますが、アスペクト比は縦横どちらかがautoになっていないだけなのではないでしょうか。
もちろんjQueryでもCSSのcalcは使えます。
http://stackoverflow.com/questions/21911407/use-css-calc-in-jquery

あと釈迦に説法なのかもしれませんが、、
レスポンシブにその部分を動かすのであれば、

javascript

1$(window).on('load resize', function() { 2 if (window.matchMedia('(max-width:768px)').matches) { 3 // 処理 4 } 5});

PCでまずきちっと作り、スマホ定義は上記ソース内に埋め込んだ方が経験上うまくいきます。

投稿2016/10/31 09:31

takepieee

総合スコア686

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/31 10:04

ありがとうございます。 こちらに何とかある程度再現しました。 ただなぜかスプリットスクリーンなのに横並びになってくれませんでした。 http://codepen.io/anon/pen/pEXqNg gulpを使ってミニファイしているのでCSSはapp.cssをそのまま貼り付けざる負えませんでした。みにくくてすいません。 ほかにうまくその部分だけ切り取る方法があればいいのですが、インスペクタからとっても、タグの数分だけ行うのは現実無理ですよね。
退会済みユーザー

退会済みユーザー

2016/10/31 10:07

<div id="slide"> <img class="slide__item" src="src="http://placehold.jp/1500x500.png"> <img class="slide__item" src="http://placehold.jp/1500x500.png"> <img class="slide__item" src="http://placehold.jp/1500x500.png"> <div class="controle-btn-wrap u-zindex-most-top"> <a class="controle-btn-wrap__link" href=""><i class="controle-btn-wrap__item material-icons u-text-shadow-0dot1rem-0dot1rem-0dot1rem-a0dot4">fast_rewind</i></a> <a class="controle-btn-wrap__link" href=""><i class="controle-btn-wrap__item material-icons u-text-shadow-0dot1rem-0dot1rem-0dot1rem-a0dot4">pause</i></a> <a class="controle-btn-wrap__link" href=""><i class="controle-btn-wrap__item material-icons u-text-shadow-0dot1rem-0dot1rem-0dot1rem-a0dot4">play_arrow</i></a> <a class="controle-btn-wrap__link" href=""><i class="controle-btn-wrap__item material-icons u-text-shadow-0dot1rem-0dot1rem-0dot1rem-a0dot4">fast_forward</i></a> </div> 上記のスライドショーの画像のサイズをレスポンシブで、自在に操りたいです。 positionを使っていなければ親からはみ出すくらい大きくしてはみ出したところを隠せば、どんなサイズでもアスペクト比を変えずに画像の一部だけになっても表記できるのですが、positionを使っているのではみ出たところだけ隠すこともできません。
takepieee

2016/10/31 10:23

スライドショーという見せ方上、positionは使うと思いますよ。座標を固定しないと同じ位置から画像が動いているように見せられませんから。 レスポンシブのスライドショーは現実あるわけですから、正解はあるわけで。 スライドショーである以上、アスペクト比の同じ画像がスライドするはずですよね。 その見え方が違うのであれば定義か計算か、どっちかが間違っているんだと思います。 ただ、内容的に「頑張ってください」としか申せません。ご了承ください。
退会済みユーザー

退会済みユーザー

2016/10/31 11:58

そんなサービスもあるのですね。 うまくお伝えできずに恐縮ですが、スライドショーの画像のアスペクト比がおかしくなるのではなく、スライドショーとその親のボックスのアスペクト比が同じでないので、 横幅、縦幅親ボックスと同じサイズにしてしまうと、画像のアスペクト比がおかしくなるのでどうしたらいいですかということです。 背景だと、background:cover;でぴったりになってくれますよね。 imgでもそのようなことはできないのでしょうか?
退会済みユーザー

退会済みユーザー

2016/10/31 12:22

//ある要素の高さをある要素と同じ高さにする-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のサイズの時に画像が横に引き伸ばされて、おデブな画像になってしまいます。
takepieee

2016/11/01 01:56

アスペクト比が変わるという事自体、そもそもおかしな指定をしているわけで。 レスポンシブの場合幅が変わりますので、ソレに合わせて高さを計算してやればいいだけのはずです。 比率で高さなり幅をcalcで指定すればいい話だと思います。
退会済みユーザー

退会済みユーザー

2016/11/01 02:26

//ある要素の高さをある要素と同じ高さにする-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); } }) これで親要素のサイズぴったりのスライドショーになることは成功しています。 ただレスポンシブな親要素の縦横比と画像のアスペクト比が常に一緒にはならないですよね。 そもそも親要素とぴったりで画像のアスペクト比がおかしくならないようにすること自体が不可能なのでしょうか? そうなら、widthに合わせてheightが自動に決まる古井戸イメージにして、仕方がないので隙間が空いても仕方がないと考えるしかないでしょう?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問