Bootstrap-Grid 1920 分辨率图片仍然很小

Posted 2023-03-06

【中文标题】Bootstrap-Grid 1920 分辨率图片仍然很小

【英文标题】：Bootstrap-Grid 1920 resolution pictures remain small

【发布时间】：2021-01-27 18:05:30

【问题描述】：

图片随着1280分辨率成比例增加，但是1280分辨率后图片没有增长，你能帮帮我吗？

在 1920 分辨率下看起来像这样

在 1280 分辨率下看起来像这样

    <div  id="logokutu1" class="deneme ortalama neozel logoborder col col-md-a col-lg-a">
      <a href="#">
      <img   src="marketplace logo/ne-lazimsa-logo.png">
    </a>
    </div> 
      
    <div id="logokutu2" class=" ortalama trendozel logoborder col col-md-a col-lg-a">
      <a href="#">
      <img    src="marketplace logo/trendyol-logo.png">
      </a>
    </div> 
    <div id="logokutu3" class="ortalama hepsiozel logoborder col col-md-a col-lg-a">
      <a href="#">
      <img    src="marketplace logo/hepsiburada-logo.png">
      </a>
    </div>
   <div id="logokutu4" class="ortalama  logoborder col col-md-a col-lg-a">
    <a href="#">
      <img   src="marketplace logo/gitti-gidiyor-logo.png">
      </a>
    </div> 
   <div id="logokutu5" class="ortalama n11ozel logoborder col col-md-a col-lg-a">
    <a href="#">
      <img   src="marketplace logo/n11-logo.png">
      </a>
    </div> 
   <div id="logokutu6" class="amazonozel bu ortalama logoborder col col-md-a col-lg-a">
    <a href="#">
      <img   src="marketplace logo/amazon-logo.png">
      </a>
    </div> 
    <div id="logokutu7" class="cicekozel evet ortalama  logoborder col col-md-a col-lg-a">
      <a href="#">
      <img   src="marketplace logo/ciceksepeti-logo.png">
      </a>
    </div> 
  </div>

【参考方案1】：

是的，这是因为图像现在已扩大到 100%，无法再变大了。您需要查看 Bootstrap 的 media queries

【讨论】：

所以我的网站不会以 1920 分辨率运行？

@NurullahGüneyli 还有一件事。为什么你的img宽度设置为100？它必须是一个％，对吧？像 100% 这样的图像将是响应式的，您可以放大和缩小。您不能在此处使用 BS 的 img-fluid 类，因为它告诉浏览器不要将图像展开大于其原始大小。

解决方案是什么，我无法完全理解您的意思。你能再解释一下吗？

@NurullahGüneyli 我的意思是，除非您调整宽度单位，否则图像不会变大。一定是相对的！查看此article 了解更多信息！

.container 显示：网格；宽度：2560 像素；高度：100%；网格间隙：1rem；对齐项目：中心；字体系列：'Nunito'； 我做了 2560 像素宽但没有改变