質問編集履歴

リンク先など機微情報が記載されていたため修正

2022/09/04 17:15

投稿

poppoko

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,301 +1,151 @@
 ### 前提・実現したいこと
 slickを使って異なる画像3枚をスライドさせたいのですが画像サイズをそろえることができません。
 画像サイズは1枚目1000×600と二枚目1429×1000と三枚目1500×1000です。
 画像の表示サイズをそろえて、縦横比を維持しつつ、はみ出た部分を切り取らずに画像全体を表示させたい。スマホで表示。
 ### 発生している問題・エラーメッセージ
 以前の質問でも解決策としてあがっていたのですが、数々のサイトではheightをvwで設定することとobject-fit:cover;を記述することで解決できると紹介されているのですが、うまくいきません。
 .slick-slide img {
  width:100%;
  height:55vw;
  object-fit:cover;
 }
 とするとスライダーでの表示サイズは縦横揃うんですが、1枚目の画像がトリミングされて切れてしまいます。
 object-fit:contain;にしてみると画像は全体表示されますが、三枚の画像サイズがそろわなくなります。
 ### 該当のソースコード
 ```HTML
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
 <link rel="stylesheet" href="styles.css">
 <div class="sliderArea">
   <ul class="slider">
-<li><a href="https://item.rakuten.co.jp/sanleaves-official/10000002/" target="_blank"><img src="https://www.rakuten.ne.jp/gold/sanleaves-official/mizukiri/%E7%94%BB%E5%83%8F3.jpg"alt="水きりマット"></a></li>
-<li><a href="https://item.rakuten.co.jp/sanleaves-official/10000000/" target="_blank"><img src="https://www.rakuten.ne.jp/gold/sanleaves-official/microfibercloth/%E2%91%A0%201429x1000px.jpg" alt="洗車タオル"></a></li>
-<li><a href="https://item.rakuten.co.jp/sanleaves-official/10000005/" target="_blank"><img src="https://www.rakuten.ne.jp/gold/sanleaves-official/hanger/20200123-1.jpg"alt="クリップハンガー"></a></li>
+<li><a href="＃" target="_blank"><img src="3.jpg"></a></li>
+<li><a href="＃" target="_blank"><img src="1000px.jpg" ></a></li>
+<li><a href="h＃" target="_blank"><img src="1.jpg"alt=""></a></li>
 </ul>
 </div>```ここに言語を入力
 コード
 ```
 ```CSS
 .sliderArea {
   max-width: 100%;
   margin: 0 auto;
   padding: 0 25px;
+}
+.sliderArea.w300 {
+  max-width: 300px;
+}
+.slick-slide {
+  margin: 0 5px;
+}
+.slick-slide img {
+ width:100%;
+ height:55vw;
+ object-fit:contain;
+backgroun:red;
 }
-.sliderArea.w300 {
+.slick-slider{
-  max-width: 300px;
+  padding-left:0;
 }
+.slick-prev, .slick-next {
+  z-index: 1;
+}
+.slick-prev:before, .slick-next:before {
+  color: #000;
+}
 .slick-slide {
+  transition: all ease-in-out .3s;
-  margin: 0 5px;
+  opacity: .2;
 }
-.slick-slide img {
+.slick-active {
- width:100%;
- height:55vw;
+  opacity: 1;
- object-fit:contain;
-backgroun:red;
 }
-.slick-slider{
+.slick-current {
-  padding-left:0;
+  opacity: 1;
 }
-.slick-prev, .slick-next {
+.thumb {
-  z-index: 1;
+  margin: 20px 0 0;
 }
-.slick-prev:before, .slick-next:before {
+.thumb .slick-slide {
-  color: #000;
+  cursor: pointer;
 }
-.slick-slide {
+.thumb .slick-slide:hover {
-  transition: all ease-in-out .3s;
-  opacity: .2;
+  opacity: .7;
 }
-.slick-active {
-  opacity: 1;
-}
-.slick-current {
-  opacity: 1;
-}
-.thumb {
-  margin: 20px 0 0;
-}
-.thumb .slick-slide {
-  cursor: pointer;
-}
-.thumb .slick-slide:hover {
-  opacity: .7;
-}
   ```
 ```javascript
 <script>
   $(function() {
       $('.slider').slick({
           autoplay: true,
           autoplaySpeed: 4000,
           dots: true,
           easing: 'ease-in-out',
           pauseOnFocus: false,
           pauseOnHover: false,
           pauseOnDotsHover: false,
           waitForAnimate: false,
       });
   });
   $('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){
     $('.slider').slick('slickPlay');
   });
   </script>```
 ```
 また、[https://www.peko-step.com/tool/resize.html](https://www.peko-step.com/tool/resize.html)こちらのような画像サイズ変更サイトで1000×600を縦横比率を維持しつつ他の二枚とサイズの近い1500×900に変更してみるなどして設定しましたが、結果は同じでした。
 どうぞよろしくお願いします。
 追加です。
 .slick-slide img {
 width:100%;
 height:100%;
 }
 .slick-track{
 height:60vh;
 }
 と
 <script>
 $(function() {
 $('.slider').slick({
 autoplay: true, //オートプレイ
 autoplaySpeed: 4000, //オートプレイの切り替わり時間
 dots: true, //下の点々
 easing: 'ease-in-out', //スライドの動きを制御
 pauseOnFocus: false,
 pauseOnHover: false,
 pauseOnDotsHover: false,
 waitForAnimate: false,
 variablewidth:true
+});
 });
-});
 も試してみました。
 しかし縦がそろわなくなってしまいました。
 コード
 ```

CSS3 HTML5 スライダー jQuery

文章変更

2020/12/20 00:16

投稿

poppoko

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -8,8 +8,6 @@
 画像の表示サイズをそろえて、縦横比を維持しつつ、はみ出た部分を切り取らずに画像全体を表示させたい。スマホで表示。
-こちらのものです→[https://quest.reichannel9.com/](https://quest.reichannel9.com/)
 ### 発生している問題・エラーメッセージ

文章編集

2020/12/20 00:16

投稿

poppoko

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -231,3 +231,73 @@
 どうぞよろしくお願いします。
+追加です。
+.slick-slide img {
+width:100%;
+height:100%;
+}
+.slick-track{
+height:60vh;
+}
+と
+<script>
+$(function() {
+$('.slider').slick({
+autoplay: true, //オートプレイ
+autoplaySpeed: 4000, //オートプレイの切り替わり時間
+dots: true, //下の点々
+easing: 'ease-in-out', //スライドの動きを制御
+pauseOnFocus: false,
+pauseOnHover: false,
+pauseOnDotsHover: false,
+waitForAnimate: false,
+variablewidth:true
+});
+});
+も試してみました。
+しかし縦がそろわなくなってしまいました。
+コード
+```

コードの変更

2020/12/15 05:31

投稿

poppoko

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -110,12 +110,12 @@
  width:100%;
- /* height:195px; */
  height:55vw;
  object-fit:contain;
+backgroun:red;
 }

コードの変更

2020/12/15 03:19

投稿

poppoko

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -114,7 +114,7 @@
  height:55vw;
- object-fit:cover;
+ object-fit:contain;
 }

初心者マーク追加

2020/12/15 03:16

投稿

poppoko

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -218,7 +218,7 @@
   });
-  </script>```
+  </script>```
 ```