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}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/16 02:05