Q&A
画面キャプチャ及び画面幅サイズと画像サイズの情報をいただけますか。
### ヘッダーと同じ幅にしたいですが、画像が小さいのか、ヘッダーが大きいのか幅が合いません。 画面幅は992px 画像サイズは1012pxです。
Bootstrapを使用しスライドショーを作成しています。
画像がを画面横幅一杯使いたいのですが途中でき見切れてしまいます。
解決策をご教示いただけると幸いです。
試したこと
幅を調整すれば良いと思い、Google Chromeにて検証してみたのですが、すでにwidthは１００％でした。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 10 integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 11 JS, Popper.js, and jQuery 12</head> 13 14<body> 15 <div id="slides" class="carousel slide" data-ride="carousel"> 16 <ul class="carousel-indicators"> 17 <li data-target="#slides" data-slide-to="0" class="active"></li> 18 <li data-target="#slides" data-slide-to="1"></li> 19 <li data-target="#slides" data-slide-to="2"></li> 20 </ul> 21 22 <div class="carousel-inner"> 23 <div class="carousel-item active"><img src="img/background.png" alt="..."> 24 <div class="carousel-caption"> 25 <h1 class="display-2">Bootsprap</h1> 26 <h3>Complete Website Layout</h3> 27 <button type="button" class="btn btn-outline-light btn-lg">VIEW DEMO</button> 28 <button type="button" class="btn btn-primary btn-lg">Get Started</button> 29 </div> 30 </div> 31 <div class="carousel-item"><img src="img/background2.png" alt="..."></div> 32 <div class="carousel-item"><img src="img/background3.png" alt="..."></div> 33 34 </div> 35 </div> 36 37 38 39</body> 40 41</html>
回答1件
0
ベストアンサー
これは、youtubeのbootstrap練習動画でしょうか。
https://www.youtube.com/watch?v=9cKsq14Kfsw&feature=youtu.be
私も以前、やったことがあり、パソコンにファイルが残ってました。
この動画の最後の方でCSSの調整をしてます。
imgタグにwidth:100%を設定すれば、画面幅一杯になると思いますが。
width:100%を指定していないと、見切れた感じになります。
アップされているソースコードで全てであれば、画像のサイズは元の画像サイズのまま表示されると思います。（元画像サイズより画面サイズが小さい時は見切れない）
以下、とりあえず、HTMLに直書きで。
html
1<div class="carousel-item active"><img src="background.png" alt="..." style="width: 100%;"> 2
以上
投稿2020/01/14 08:01
総合スコア640
あなたの回答
tips
プレビュー
