css - 如何使用媒体查询增加图像的大小
问题描述
我想在窗口大小减小时增加图像大小,为此我使用了媒体查询。每当窗口大小为 423 时,图像大小就会增加。所以我尝试使用媒体查询,但它不适用于该标签。如何增加尺寸?这是我的 HTML 和 CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
@media screen and (max-width:768px ) and (min-width: 320px)
{
.samyata {
width:100px;
height:auto;
}
}
</style>
</head>
<body>
<div class="container-fluid text-center" style="background-color:#F2F2F2"><br>
<h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>
<div class="row" id = "first" style="margin-left:7%" >
<div class="col-sm-6">
<img src="Assets/img/sam.png" class = "samyata"
hspace="30" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left;">
Get it the way you want </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">
A new and effecient retail commerce platform
and ecosystem to bring stores, shoppers and
personal shoppers together in a geographically
specific, simple buying and selling experience.
</p>
<a href = "#" class = "text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:63%;"> Explore Samayata </a>
</div>
<div class="col-sm-6">
<img src="Assets/img/vahaka.png" hspace = "30" class = "vahaka" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left">
Make money as a personal shopper </h5>
<p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">
Deliver shopper purchases.
Be your own boss. Do it when you want.
Get paid right away.
</p>
<a href = "#" class ="text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:70%"> Explore Vahaka </a>
</div>
</div><br><br>
<div class = "row" style="margin-left:7%">
<div class="col-sm-6" >
<img src="Assets/img/gananam.png" hspace = "30" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left;">
Attract shoppers to your stores </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">
Partner with Samyata Stores
for a new way to make money,
reach new customers and deliver
products to your customers.</p>
<a href = "#" class = "text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';
margin-right: 63%"> Explore Gananam </a><br><br><br>
</div>
</div><br>
</div>
</body>
如何应用?请帮我解决这个问题。当窗口大小减小和增加时,我希望所有图像和文本并排,但是当我减小时,我会出现图像下方文本的相同部分。我想要图像同一侧的所有文本。
解决方案
带有 class="samyata" 的 img 具有其样式内联(即在样式属性中)。这将始终覆盖样式表中的样式。
解决方案:将样式从属性中取出,放在媒体查询上方的样式表中。
您的另一个问题,即环绕在图像下方的文本,可以通过将文本放在它自己的块中并给它一个左边距来解决。
.samyata, .vahaka, .gananam {
width: 28%;
height: 40%;
float:left;
}
.row {
padding-bottom: 1em;
}
.block {
margin-left:37%;
}
.col-sm-6 h5 {
margin-top: 0;
font-family: 'Fira Sans Condensed';
text-align: left;
}
@media screen and (max-width: 768px) and (min-width: 320px) {
.samyata, .vahaka, .gananam {
width: 100px;
height: auto;
}
.block {
margin-left:130px;
}
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid text-center" style="background-color:#F2F2F2"><br>
<h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>
<div class="row" id="first" style="margin-left:7%">
<div class="col-sm-6">
<img src="https://i.stack.imgur.com/rblbG.jpg" class="samyata">
<div class="block">
<h5> Get it the way you want </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">
A new and effecient retail commerce platform and ecosystem to bring stores, shoppers and personal shoppers together in a geographically specific, simple buying and selling experience.
</p>
<a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:63%;"> Explore Samayata </a>
</div>
</div>
</div>
<div class="row" style="margin-left:7%">
<div class="col-sm-6">
<img src="https://i.stack.imgur.com/N3atj.jpg" class="vahaka">
<div class="block">
<h5> Make money as a personal shopper </h5>
<p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">
Deliver shopper purchases. Be your own boss. Do it when you want. Get paid right away.
</p>
<a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:70%"> Explore Vahaka </a>
</div>
</div>
</div>
<div class="row" style="margin-left:7%">
<div class="col-sm-6">
<img src="https://i.stack.imgur.com/TUvgC.jpg" class="gananam">
<div class="block">
<h5> Attract shoppers to your stores </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">
Partner with Samyata Stores for a new way to make money, reach new customers and deliver products to your customers.</p>
<a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';
margin-right: 63%"> Explore Gananam </a>
</div>
</div>
</div>
</div>
另外,不要使用hspace
. 它已被弃用并且存在兼容性问题。改用边距。
编辑:我做了一些更改,但我不确定它现在看起来是否像您想要的那样。所以认为这是一项正在进行的工作。
推荐阅读
- python-2.7 - Cassandra COPY FROM 查询错误,带有 CSV 文件
- jquery - 如何获取之前选择器的主机元素?
- c - 如何列出计算机上的所有项目(C、Java、Python、C++ 等...)
- python-3.x - 在没有类或 id 的 div 标记中提取文本
- reactjs - Gatsby 应用程序是移动设备上的 SPA,在桌面上具有不同的路由
- python - Python,ValueError:x 和 y 必须具有相同的第一维问题
- c - 为什么允许递归会使 C 在 8 位 CPU 上变慢/效率低下
- node.js - 尝试解析 http 请求的 json 时,位置 1 处的 JSON 中出现意外令牌 o 错误
- docker - 在容器中运行 openGL 的问题
- json - TensorFlow 保存模型的数据输入 JSON 格式