如何解决HTML + CSS-调整图片大小仅适用于移动设备
我将直接向您展示而不是说明。
有人给我任何有关如何解决它的建议吗?我尝试了引导程序和媒体查询,但一直在努力寻找一些方法来将图像调整为足够小的尺寸,以便它们在移动设备上彼此相邻显示。
头:
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,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>
解决方法
我将图像设置到容器<div style="display:flex; justify-content:center;">
中,并将max-width添加到图像css
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,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>
<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="#one" class="more">Learn More</a>
<video src="images/banner.mp4" muted autoplay loop playsinline></video>
</section>
</body>
,
好的,当您输入的最大宽度相同时,您无需设置两个不同的最大宽度。如果您需要此尺寸,我会将宽度设置为100%,最大宽度为100px。我不是像您一样喜欢嵌入式CSS的人。我将重命名已应用flex的div,然后将代码与其他样式一起放入,这样就不会遍地开花了。如果可以的话,将它集中到一处是很有帮助的。
<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进行了一些更改。
如果这不是您想要的输出,请在评论中让我知道,我会尽力帮助您。
Ps。我评论了该视频,因为它导致水平滚动。
.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="#one" class="more">Learn More</a>
<!-- <video src="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/popper.js@1.16.1/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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。