所以最近我一直在开发一个网站,希望它能做出响应,我已经能够让它对所有较小的分辨率都有响应,但我不知道如何让我的网站上的图像放大
这是它的外观p1和标志都是图像
我尝试了很多在互联网上可用的方法,但没有任何效果
所有图像都在引导程序容器中
@charset "utf-8";
.columnup {
padding-left: 10px;
padding-top: 20px;
}
.columndown {
padding-left: 10px;
padding-top: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div class="container">
<div class="row">
<div class="column col-md-12 columnup">
<center><img src="https://image.ibb.co/fESvOL/Group-1.png"></center>
</div>
</div>
</div>
<center>
<div class="container">
<div class="row">
<div class="column columnup col-md-4 col-sm-6">
<img src="https://image.ibb.co/eidfq0/thumbnail-1.png" class="imaget">
</div>
<div class="column col-md-4 col-sm-6 columnup">
<img src="https://image.ibb.co/eidfq0/thumbnail-1.png">
</div>
<div class="column col-md-4 col-sm-6 col-sm-offset-3 columnup ">
<img src="https://image.ibb.co/eidfq0/thumbnail-1.png">
</div>
</div>
<div class="row">
<div class="column columndown col-md-4 col-sm-6 col-md-offset-2 ">
<img src="https://image.ibb.co/eidfq0/thumbnail-1.png">
</div>
<div class="column columndown col-md-4 col-sm-6 ">
<img src="https://image.ibb.co/eidfq0/thumbnail-1.png">
</div>
</div>
</div>
</center>
</body>
这是我网站的一个小版本因此,有人可以缩放元素,使其在720p分辨率和1080p分辨率上看起来相似吗
提前感谢
您使用的是Bootstrap前端框架。Bootstrap已经有一些预定义的布局断点,特别是.container
类,在您的情况下,它会包装您的图像。
具体来说,具有.container
类的分区(div
(可以采用以下宽度之一,具体取决于屏幕大小:
Screen size | Container size
<576px | auto
≥576px | 540px
≥768px | 720px
≥992px | 960px
≥1200px | 1140px
根据上表,如果屏幕大小为1200px
或更高,则最大宽度.container
div
可以为1140px
。
这基本上意味着,如果您在1920px
宽度的浏览器中打开页面,.container
div
将为1140px
宽度,位于屏幕中间。.container
内部的图像只能与它们所在的div
一样宽,因此它们也被限制为1140px
的最大值。这意味着.container
div
和屏幕边缘之间将有一些空白空间。空位的1920px - 1140px = 780px
!
你想把图像的宽度增加到100%
,这样它们就可以从屏幕的一端适当地放大到另一端,但你把它们包裹在.container
div
中,Bootstrap预定义为1440px
,所以它们永远无法实现这一点。为了实现这个目标,您需要摆脱Bootstrap在.container
div
上设置的1140px
限制。
实际上,这个问题有数百种不同的解决方案,你使用哪一种真正取决于你的设计目标,而你还没有很好地定义,所以我不能给你最合适的解决方案。
最简单、最脏的解决方法是在自定义样式表中用这个CSS覆盖Bootstrap类。
@media (min-width: 1200px) {
.container {
max-width: 100%;
}
}
然后,当然,风格你的图像:
img {
width: 100%;
}