【发布时间】：2020-12-22 15:45:07
【问题描述】：
我会直接跳进去给你看，而不是解释。
有人给我任何关于如何解决它的建议吗？我已经尝试过引导和媒体查询，但我正在努力将图像调整为足够小的尺寸，以便它们在移动设备上彼此相邻。
头：
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="assets/css/main.css" />
<link rel="icon" href="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="assets/js/games/Cards/card-placeholder.png" > OR
<img id="wildcard" class="mob-img" src="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="#one" class="more">Learn More</a>
<video src="images/banner.mp4" muted autoplay loop playsinline></video>
</section>
</body>【问题讨论】：
-
第一个建议是分享您的 html 和 css 代码...
-
请分享您的代码，以便我们使用它。
-
简单的答案是为您的图像提供 100% 的宽度。理想情况下，仅在移动设备上通过
-
添加了我的代码。对不起！
标签： html css bootstrap-4 media-queries