HTML + CSS - モバイル専用に画像のサイズを変更します
説明するのではなく、早速説明していきます。
私の Web サイトがブラウザ上でどのように見えるかは次のとおりです。
私の Web サイトをモバイルで表示すると次のようになります。
誰かがそれを修正する方法についてアドバイスをくれますか?ブートストラップとメディア クエリを試してみましたが、モバイル上で並べて表示されるように画像を十分に小さいサイズに変更する方法を見つけるのに苦労しています。
頭:
img.mob-img {
width: 220;
height: 333;
}
@media screen and (max-width: 992) {
img.mob-img {
width: 100px;
height: auto;
}
}
@media screen and (max-width: 600) {
img.mob-img {
width: 100px;
height: auto;
}
}<head>
<title>DrinkMania - Drink or Dare</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
<meta name="description" content="Drink or Dare! - Truth or dare developed with students in mind!">
<meta name="keywords" content="kings, ring of fire, drinking games, drinkmania, drinking games online,student, frat, dirty pint, kings cup, drinking games online,
app, mobile website, android, ios, reddit, scott montford, playing cards, university, party, friends, talisman webs">
<link rel="stylesheet" href="https://stackoverflow.com/questions/63723039/assets/css/main.css" />
<link rel="icon" href="https://stackoverflow.com/questions/63723039/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145322216-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '');
</script>
</head>
<body class="is-preload">
Section of the body:
<!-- Banner -->
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<img id="drinks" class="mob-img" src="https://stackoverflow.com/questions/63723039/assets/js/games/Cards/card-placeholder.png" > OR
<img id="wildcard" class="mob-img" src="https://stackoverflow.com/questions/63723039/assets/js/games/Cards/card-placeholder.png" >
</header>
<ul class="actions special">
<li><a href="" class="button primary large" onclick="drawCard()">Draw 2 Cards</a></li><br>
</ul>
</div>
<a href="" class="more">Learn More</a>
<video src="https://stackoverflow.com/questions/63723039/images/banner.mp4" muted autoplay loop playsinline></video>
</section>
</body>1
最初のアドバイスは、HTML と CSS のファイルを共有することです。デ...
– マキシギ2020 年 9 月 3 日 11:52
作業できるようにコードを共有してください。
– ユセフ2020 年 9 月 3 日 11:53
簡単な答えは、画像の幅を 100% にすることです。理想的には、メディア クエリ <992px または <768px によるモバイルのみ。画像のサイズが類似していない場合は、画像を適切に配置するために max-height を設定する必要があります。
– ティム・フェルマーレン2020 年 9 月 3 日 11:55
コードを追加しました。ごめんなさい！
– スコット・モンフォード2020 年 9 月 3 日 12:03
------------------------
画像をコンテナ <div style="display:flex; に設定します。 justify-content:center;">画像の CSS に max-width を追加します
img.mob-img {
width: 220px;
height: 333px;
}
@media screen and (max-width: 992) {
img.mob-img {
max-width: 100px;
height: auto;
}
}
@media screen and (max-width: 600) {
img.mob-img {
max-width: 100px;
height: auto;
}
}<head>
<title>DrinkMania - Drink or Dare</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
<meta name="description" content="Drink or Dare! - Truth or dare developed with students in mind!">
<meta name="keywords" content="kings, ring of fire, drinking games, drinkmania, drinking games online,student, frat, dirty pint, kings cup, drinking games online,
app, mobile website, android, ios, reddit, scott montford, playing cards, university, party, friends, talisman webs">
<link rel="stylesheet" href="https://stackoverflow.com/questions/63723039/assets/css/main.css" />
<link rel="icon" href="https://stackoverflow.com/questions/63723039/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145322216-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '');
</script>
</head>
<body class="is-preload">
Section of the body:
<!-- Banner -->
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<div style="display:flex; justify-content:center;">
<img id="drinks" class="mob-img" src="https://cdn.pixabay.com/photo/2020/01/31/07/10/billboards-4807268_960_720.jpg" > OR
<img id="wildcard" class="mob-img" src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" >
</div>
</header>
<ul class="actions special">
<li><a href="" class="button primary large" onclick="drawCard()">Draw 2 Cards</a></li><br>
</ul>
</div>
<a href="" class="more">Learn More</a>
<video src="https://stackoverflow.com/questions/63723039/images/banner.mp4" muted autoplay loop playsinline></video>
</section>
</body>------------------------
OK、入力する値が同じであれば、2 つの異なる最大幅を設定する必要はありません。それが必要なサイズであれば、幅を100％、最大幅を100ピクセルに設定します。私は皆さんのようにインライン CSS の大ファンではありません。フレックスを適用した div の名前を変更してから、他のスタイルでコードを配置して、あちこちに散らばらないようにします。可能であれば、1 か所で確認できると便利です。
<div id="cards">
<img id="drinks" class="mob-img" src="https://cdn.pixabay.com/photo/2020/01/31/07/10/billboards-4807268_960_720.jpg" > OR
<img id="wildcard" class="mob-img" src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" >
</div>
CSS
#cards {
display:flex;
justify-content:center;
}
img.mob-img {
width: 220px;
height: 333px;
}
@media screen and (max-width: 992px) {
img.mob-img {
width: 100%;
max-width: 100px;
height: auto;
}
}
------------------------
これがあなたがやろうとしていることですか?レスポンシブ対応も確認しました。ブートストラップを使用しているとおっしゃっていたので、提供された CSS を使用する必要はありませんでした。
この結果を得るために、さらに div を追加して、HTML にいくつかの変更を加えました。
これがご希望の出力でない場合は、コメントでお知らせください。全力でサポートさせていただきます。
追伸。水平スクロールが発生していたので、ビデオをコメントアウトしました。
.image-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.image-holder {
padding: 10px;
}<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<div class="holder">
<div class="image-container">
<div class="image-holder">
<img id="drinks" class="mob-img img-fluid" src="https://picsum.photos/200">
</div>
<span>OR</span>
<div class="image-holder">
<img id="drinks" class="mob-img img-fluid" src="https://picsum.photos/201">
</div>
</div>
</div>
</header>
<ul class="actions special">
<li><a href="" class="button primary large" onclick="drawCard()">Draw 2 Cards</a></li><br>
</ul>
</div>
<a href="" class="more">Learn More</a>
<!-- <video src="https://stackoverflow.com/questions/63723039/images/banner.mp4" muted autoplay loop playsinline></video> -->
</section>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>新着記事:
アマゾン ウェブ サービス - AWS LogInsights クエリ統計数の平均コマンド - リモート マシンの Program Files にある /c cmd echo と app に問題があります...typescript - rxJs のメソッド ,combinelatest を非推奨ではないメソッドに置き換える方法は?Python - pygameでカラールックアップテーブルを使用するbash - シェル スクリプトの for ループ内でテキスト ファイルを 1 行ずつ繰り返しますR では、データフレームに対して p.adjust のすべてのメソッドを一度に使用するにはどうすればよいですか?Django Queryset フィルターと SQL の同等性C++ - 指定された順序と事前順序を持つバイナリ ツリーを見つけようとしました。再帰的アプローチに従っていますが、間違った出力が得られます。C# - 関数を渡して配列内の入力値を取得するGroovy スクリプトとして実行Dialogflow cx - Webhook JSON 応答の解析に失敗しましたPython - Latex: リストで特殊文字が正しく置換されない