【HTML】【CSS】【Swiper】元の画像は横1200×縦600なのですが、実際のサイト上に反

締切済

質問者：あああああいうなたなま
質問日時：2022/07/16 13:57
回答数：5件

【HTML】【CSS】【Swiper】
元の画像は横1200×縦600なのですが、実際のサイト上に反映させると細長くなってしまいます。
横2:縦1の比率でスライドショーに乗せたいのですが、どのように変更すればいいのでしょうか？
スライドショーは正常に動いてるので、画像変更に必要だと思われる部分だけ載せておきます。
【CSS】

img {
width: 1200px;
height: 600px;
}

.ss-image {
width: auto;
height: auto;
padding: 0px;
margin:0px;
}

<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="ss-image" src="./images/aa.jpg">
</div>
<div class="swiper-slide">
<img class="ss-image" src="./images/bb.jpg">
</div>
<div class="swiper-slide">
<img class="ss-image" src="./images/cc.jpg">
</div>
</div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： naokita
回答日時：2022/07/16 20:10

そのCSSだと、

img {
.ss-image {
が同じなので重複しているし、意味がないですね・・・
まあ、重複していても優先順位があるので、1200px×600pxではなく、autoになっているからです。

＞細長くなってしまいます。
横長って事かな？
それなら、貴方は、パソコンのワイド画面で表示しているって事かなぁ？
その場合は、
div swiper-slide {
max-width: 1200px;
max-height: 600px;
}
が必要。

とりあえず、設定してみて！
--------------------

ただし、それだけなら、
ワイドには対応したけど、スマホの少画面では、またNGになるはすですよ・・・
そこからどうするかはまら別の問題ですけどね（笑）

まあ、（他のCSSが関与しなければ、）
今回の質問の問題部分は解決するはずです。

- 0
- 件

通報する

No.4

回答者： t_fumiaki
回答日時：2022/07/16 16:24

cssを見ないと解りません。

cssが重要なんですよ。
レスポンシブでやってる気がします。

親要素に対する％でやってると思う。そこを見ないと何とも言えない。

- 0
- 件

通報する

No.3

回答者： fujillin
回答日時：2022/07/16 15:27

こんにちは

Swiperって知りませんけれど・・

まずはドキュメントを見て、その通りに設置して動作を確認してから、改変してゆけば良いのでは？
https://swiperjs.com/get-started

「.swiper-wrapper の親要素にサイズを設定しろ」との記載がありますね。
・無指定だと、divは幅100％のデフォルトサイズになります。
・.swiper-wrapper はFlexのコンテナになっています。

画像サイズが全部1200×600なら、これでも行けるのでは？

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js" …
<style>
.swiper {
width: 1200px;
height: 600px;
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="ss-image" src="./images/aa.jpg" />
</div>
<div class="swiper-slide">
<img class="ss-image" src="./images/bb.jpg" />
</div>
<div class="swiper-slide">
<img class="ss-image" src="./images/cc.jpg" />
</div>
</div>
</div>

<script>
const swiper = new Swiper('.swiper');
</script>
</body>
</html>

- 0
- 件

通報する

No.2

回答者：ほーほけきょッ
回答日時：2022/07/16 14:49

No.1：追記

いろいろ試したのですが、「細長くなって」を再現させることはできませんでした。「細長くなって」はトリミングされるのでしょうか、それとも拡大／縮小されるのでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
img {
width: 1200px;
height: 600px;
}
.ss-image {
width: auto;
height: auto;
padding: 0px;
margin: 0px;
}
.swiper-slide {
width: 1200px;
height: 600px;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="swiper-slide">
<img class="ss-image" src="./a.jpg">
</div>
</body>
</html>