如何放大一些图片html和css



所以最近我一直在开发一个网站,希望它能做出响应,我已经能够让它对所有较小的分辨率都有响应,但我不知道如何让我的网站上的图像放大

这是它的外观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或更高,则最大宽度.containerdiv可以为1140px

这基本上意味着,如果您在1920px宽度的浏览器中打开页面,.containerdiv将为1140px宽度,位于屏幕中间。.container内部的图像只能与它们所在的div一样宽,因此它们也被限制为1140px的最大值。这意味着.containerdiv和屏幕边缘之间将有一些空白空间。空位的1920px - 1140px = 780px

你想把图像的宽度增加到100%,这样它们就可以从屏幕的一端适当地放大到另一端,但你把它们包裹在.containerdiv中,Bootstrap预定义为1440px,所以它们永远无法实现这一点。为了实现这个目标,您需要摆脱Bootstrap在.containerdiv上设置的1140px限制。

实际上,这个问题有数百种不同的解决方案,你使用哪一种真正取决于你的设计目标,而你还没有很好地定义,所以我不能给你最合适的解决方案。

最简单、最脏的解决方法是在自定义样式表中用这个CSS覆盖Bootstrap类。

@media (min-width: 1200px) {
.container {
max-width: 100%;
}
}

然后,当然,风格你的图像:

img {
width: 100%;
}

最新更新