Question

我最近开始使用bootstrap构建网站，并在创建http://en.arecotechnology.com/gunassembly.html

时遇到问题

当屏幕最小化时，照片不适合屏幕。网站上的其他页面也是如此，包括http://en.arecotechnology.com/spe2018.html（当屏幕最小化时图像覆盖文本）

我试着玩div，但似乎没有任何效果。

如果有人能给我一些关于我应该做什么的提示，我们将不胜感激！

Answer 1

尝试改变宽度，使其达到80％。这样，它最多只能占屏幕宽度的80％。

我可以提供给定的信息。链接已死，404，与Fecosos相同^^^

请尝试使用媒体规则：

@media screen and (max-width:480px) {  
    .cupcake img {
        width: [insert desired with here for certain size];
    }
}

Answer 2

要使<img>取父项的最大宽度，请将类img-responsive（Bootstrap 3）或img-fluid（Bootstrap 4）添加到图像中。

<img class="img-fuid img-responsive" src="/images/my-image.jpg">

img-responsive和img-fluid是一个Boostrap实用程序，可以为图像添加max-width: 100%;和height: auto;。使用这2个属性可以覆盖大多数图像问题，不允许图像比其容器更宽。查看Bootstrap的文档，它有很多有用的类。

添加一些媒体查询或再次使用bootstrap媒体查询助手。

Answer 3

在css文件或样式标记中使用媒体查询尝试不带：

   img {
     max-width: 100%;
   }

理论上这应该有效，因为它变成了屏幕尺寸的100％（不是100％的实际尺寸）。因此，最大宽度只会拉伸到屏幕尺寸的100％而不是滚动。

您可能需要包含其他css，但此代码广泛用于基于引导程序的站点以及其他属性。