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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

6345閲覧

画像の拡大表示(画像の基準点を中央にし、親要素を超えて表示させる方法)

tktcorporation

総合スコア108

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/08/31 05:17

編集2018/08/31 06:21

前提・実現したいこと

動作イメージ

画像のような形で画像を拡大表示させるアニメーションの実装を考えています。

ですが思うように実装することができなかったので、これを実現する方法を教えていただきたいです。

発生している問題・エラーメッセージ

問題点は2つあります。
1、基準点が左上にあるためか、そこを基準として拡大がおこなわれてしまう
2、親要素を超えてそのまま拡大させたいときに、親要素に基準点がひっかかってしまい、画像が中央からずれてしまう

試したこと

position: fixedvertical-align: middleなどを使って対応しようと考えましたが、うまく動作させることはできませんでした。

現状

index.html

1<body> 2 <div class="box"> 3 <img src="hoge.png" class="img-class"> 4 </div> 5</body>

style.css

1.box { 2 text-align: center; 3} 4.img-class { 5 width: 800px; 6 height: auto; 7 vertical-align: middle; 8}

script.js

1$(".img-class").animate({ 2 width: "3000px" 3}, { duration: 900, queue: false });

現状このような実装となっています。

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

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

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

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

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

x_x

2018/08/31 05:45

現状はどのようにしているのでしょうか?
tktcorporation

2018/08/31 06:25

質問の最後に追記させていただきました!
x_x

2018/08/31 06:40

基準が左上というのが再現できなかったので、何か別の影響はないでしょうか?
tktcorporation

2018/08/31 06:56

画像が親要素の大きさを越えると左上を基準に引っかかるような動作にならないでしょうか。他の影響は、思いつかないです…すみません…!
guest

回答2

0

transform: scale();を使用する方法はいかがでしょうか?
transformtransform-originプロパティによって基準位置が決まります。

transform-originプロパティの初期値は50% 50% 0
つまり画像の中心となりますので、記述しなくて問題ありません。

html

1<div class="親要素"> 2 <img class="画像" src="https://teratail.storage.googleapis.com/uploads/contributed_images/7facf203fda8f6103785353458a06a56.png" alt="hoge"> 3</div>

scss

1.親要素 { 2 width: 400px; 3 height: 250px; 4 // 親要素から画像をはみ出させない場合に使用してください 5 // overflow: hidden; 6 .画像 { 7 width: 100%; 8 height: 100%; 9 transition: transform .3s; 10 &:hover { 11 transform: scale(1.2); 12 } 13 } 14}

投稿2018/08/31 05:43

編集2018/08/31 05:47
rigani_c

総合スコア69

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

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

tktcorporation

2018/08/31 06:25

回答ありがとうございます! jqueryで画像の拡大をする場合でも、この方法は使えますでしょうか。 jqueryを用いてアニメーション実装を行うことを記述するのを失念していました…! 遅れましたが、現状のコードを質問の最後に追記させていただきました。
tktcorporation

2018/08/31 14:36

`transform-origin`プロパティの説明など、とてもためになりました!ありがとうございました!!
guest

0

ベストアンサー

軽いはずなので rigani_c さんの回答がおすすめですが、一応。

CSS

1.box { 2 position: relative; 3} 4 5.img-class { 6 position: absolute; 7 top: 50%; 8 left: 50%; 9 transform: translate(-50%, -50%); 10}

投稿2018/08/31 07:06

x_x

総合スコア13749

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

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

tktcorporation

2018/08/31 14:35

意図した通りの動きになりました! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問