我在同一容器内的 div 中有 1 个图像，在 div 中有 1 个标题文本。 虽然它在屏幕尺寸 >= 576 下工作正常。正如我所希望的，这是 图像和文本在同一行，大小成比例。
但是当屏幕尺寸变成 < 576 its not working and image becomes large and text becomes below the image
我使用了文本媒体查询（跨度），但我认为我做错了什么 图像媒体查询不起作用。
请看一下。我假设有一个聪明的解决方案。
请帮忙。
我的代码：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/BOOTSTRAP/CSS/bootstrap.min.css">
<!-- fontawsome icon library -->
<link rel="stylesheet" href="/BOOTSTRAP/FontAwsome/css/all.css">
<!--link own style css -->
<!-- <link rel="stylesheet" href="/MyCss/MyStyle.css"> -->
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="BOOTSTRAP/JS/code.jquery.com_jquery-3.3.1.slim.min.js"></script>
<script src="BOOTSTRAP/JS/[email protected]_dist_umd_popper.min.js"></script>
<script src="/BOOTSTRAP/JS/[email protected]_dist_js_bootstrap.min.js"></script>
<!-- diffrenct screen size media query -->
<!-- xs<576 ! 576<sm<768 ! 768<md<992 ! 992<lg<1200 ! <1200<xl -->
</body>
<style>
#container-logo-box {
/* background-image: url(/BOOTSTRAP/img/beautiful-color-ui-gradients-backgrounds-sexy-blue.png);
background-size: cover;
background-position: center;
background-clip: text; */
background-color: rgb(25,150,255)
}
#logo-img-div {
/* display: inline-block; */
/* align-items: center; */
/* position: inherit; */
margin-top: -.0%;
}
#name-logo-div {
/* display: inline-block; */
margin-top: 0%;
}
#logo-name {
display: inline-block;
font-family: Britannic Bold;
width: 100%;
font-weight: bolder;
color: yellow;
margin-top: -.05%;
margin-bottom: -2%;
}
#logo-name2 {
margin-top: -4%;
margin-left: 12%;
color: white;
}
/* MEDIA QUERY */
span.bkb{
font-size: 2.2rem;
}
@media (min-width: 576px) {
span.bkb {
font-size: 3.0rem;
}
}
@media (min-width: 768px) {
span.bkb {
font-size: 5.0rem;
}
}
@media (min-width: 992px) {
span.bkb {
font-size: 5.2rem;
}
}
@media (min-width: 1200px) {
span.bkb {
font-size: 5.5em;
}
}
/* media query for h1,h2 etc */
h2.bkb{
font-size: 18px;
}
@media (min-width: 576px) {
h2.bkb {
font-size: 18px;
}
}
@media (min-width: 768px) {
h2.bkb {
font-size: 22px;
}
}
@media (min-width: 992px) {
h2.bkb {
font-size: 28px;
}
}
@media (min-width: 1200px) {
h2.bkb {
font-size: 32px;
}
}
/* media query for img etc */
.img-am-logo {
height: 100;
width: 100;
}
@media (min-width: 576px) {
.img-am-logo {
height: 100;
width: 100;
}
}
@media (min-width: 768px) {
.img-am-logo {
height: 100;
width: 100;
}
}
@media (min-width: 992px) {
.img-am-logo {
height: 140;
width: 140;
}
}
.img-am-logo{
height: 140;
width: 140;
}
</style>
<header>
<header>
<!-- header part container 1/2 for Ticker -->
<div class="container p-0">
<div class="row"> <!-- row1 -->
<div class="col-sm-12" style="border:0px red double; left: 0%; height: 1.5rem;">
<marquee class="news-scroll text-right" behavior="scroll" direction="left" width="100%" scrollamount="12">
<a href="#" style="color:darkred;font-weight:normal; margin-left: 0%;">
ꙮ●ꙮ●ꙮ● ꙮ●ꙮ●ꙮ●
णमो अरिहंताणं, णमो सिद्धाणं, णमो
आयरियाणं, णमो उवज्झायाणं,
णमो लोए सव्व साहूणं !
ꙮ●ꙮ●ꙮ● ꙮ●ꙮ●ꙮ●
</a>
</marquee>
</div>
</div>
</div>
<!--header part container 2/2 for AM Logo and name-->
<div class="container" id="container-logo-box" >
<div class="row"> <!-- row 001 -->
<div class="col-sm-2 p-0" id="logo-img-div">
<!-- height="140" width="140" -->
<img class="img-fluid img-am-logo" src="/BOOTSTRAP/img/am-logo2-transparent-280x280.png" >
</div>
<div class="col-sm-10 p-0" id="name-logo-div">
<span class="bkb" id="logo-name">Arihant Mandal</span>
<h2 class="bkb" id="logo-name2" style="display: inline-block; ">A charitable Medical Unit</h2>
</div>
</div> <!-- row 001 -->
</div> <!-- class="container" id="container-logo-box"-->
</header>
</html>
您的媒体查询
.img-am-logo {
height: 100;
width: 100;
}
在媒体查询之外。包括它。
如果您想要不同设备的图像尺寸< 576px, use below media query
@media (max-width: 576px) {
h2.bkb {
font-size: 32px;
}
}
/* media query for img etc */
.img-am-logo {
height: 100;
width: 100;
}
查看您的代码，图像大小的媒体查询可能无法按预期工作。在 CSS 中定义图像大小时，必须指定高度和宽度属性的单位（例如像素）。此外，您关于图像尺寸的媒体问题缺少单位规格，这可能会导致问题。
这是 CSS 相关部分的更正版本：
/* ...您现有的 CSS ...*/
/* img 等媒体查询 */ .img-am-logo { height: 140px;宽度：140px； } @media (最大宽度: 575px) { .img-am-logo { 高度: 80px;宽度：80px； @media (最小宽度: 576px) { .img-am-logo { 高度: 100px;宽度：100px； @media (最小宽度: 768px) { .img-am-logo { 高度: 100px;宽度：100px； @media（最小宽度：992px）{ .img-am-logo { 高度：140px；宽度：140px； @media（最小宽度：1200px）{ .img-am-logo { 高度：140px；宽度：140px； } }