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

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

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

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

CSS

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

Q&A

解決済

1回答

303閲覧

画像の大きさ変更の起点を中央に移すには

neginattofan

総合スコア66

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/15 12:59

input[type="range"]で、valueを変えると、画像の大きさを変える仕様にしているのですが、今のままのスタイルでは不格好です。

実際に画像の大きさを変えてみると、画像は左下から大きくなっているのですが、この起点をずらすことはできるのでしょうか?

cssのdisplayやmarginプロパティを使ってみましたが、実現できませんでした。ググっても、それといった情報は得られなかったので、質問させていただきました。

どなたか詳しい方、よろしくお願いします。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="css/styles.css"> 6 <title>練習実験</title> 7</head> 8<body> 9 <div id="container"> 10 <div class="block"><img src="cheese.jpg" width="100px"> 11 <p id="output">100</p> 12 <input type="range" 13 id="slider" 14 value="100" 15 min="0" 16 max="300" 17 data-number="0" 18 > 19 </div> 20 21 22 23 24 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 25 <script> 26 $(window).on('load', function() { 27 $("input[type='range']").on('input', function() { 28 var val = $(this).val(); 29 var slider = $(this); 30 $(this).attr("data-number", val); 31 $('p').text(parseInt(slider.attr("data-number"))); 32 $('img').width(parseInt(slider.attr("data-number"))); 33 34 }); 35 }); 36 </script> 37</body> 38</html>

css

1body { 2 font-family: 'Yu Gothic'; 3 font-size: 16px; 4} 5 6#container { 7 margin: 50px auto; 8 width: 500px; 9} 10 11 12#output { 13 background: #666666; 14 text-align: center; 15 color: white; 16} 17 18input[type="range"] { 19 -webkit-appearance: none; 20 appearance: none; 21 background-color: #c7c7c7; 22 height: 2px; 23 width: 100%; 24 25 &:focus, 26 &:active { 27 outline: none; 28 } 29} 30 31input[type="range"]::-webkit-slider-thumb { 32 -webkit-appearance: none; 33 appearance: none; 34 cursor: pointer; 35 position: relative; 36 border: none; 37 width: 12px; 38 height: 12px; 39 display: block; 40 background-color: #262626; 41 border-radius: 50%; 42 -webkit-border-radius: 50%; 43 } 44}

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

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

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

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

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

guest

回答1

0

ベストアンサー

background-imageとbackground-positionを使ってみてはいかがでしょうか?

投稿2019/07/15 16:42

susiyaki

総合スコア39

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

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

neginattofan

2019/07/16 02:05

試してみましたが、実現できませんでした。 どのようなやり方か具体的に教えていただけますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問