html - 在宽屏显示器上,Chrome 中的网站布局突然发生了变化

标签 html css twitter-bootstrap google-chrome widescreen

上周更新了我的网站设计,并在不同的浏览器和设备上对其进行了测试——这是一个使用 Bootstrap 的投资组合网站——一切都很好。我今天早上在我的宽屏显示器上使用 chrome 检查了我的网站,全宽图像的尺寸似乎已经缩小,在右侧留下了空白。

此异常不会出现在不同的浏览器上,甚至不会出现在使用较小屏幕的 Chrome 上!

该网站的实时地址为 http://www.burnser.com/index.html

如有任何帮助,我们将不胜感激。谢谢!

最佳答案

图像本身只有 1600 像素的原始宽度。如果它们应该始终全屏显示,您应该在 CSS 中包含 width: 100%;

.carousel-inner>.item>a>img, 
.carousel-inner>.item>img, 
.img-responsive,
.thumbnail a>img, 
.thumbnail>img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

关于html - 在宽屏显示器上,Chrome 中的网站布局突然发生了变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41854650/

相关文章:

html - 类选择器及其效果

html - 更改 bootstrap-select (selectpicker) 的选定选项颜色

javascript - 在 html 页面中包含 xslt 样式表

css - Svelte/Sapper构建-似乎在构建后仍然存在旧CSS?

twitter-bootstrap - Bootstrap Fluid Layout 在小屏幕上的保留比例

javascript - 在onclick属性中使用Javascript获取html中的子元素标签

html - 导航栏的位置 div

css - 如何用 CSS 替换文本?

css - Twitter Bootstrap 移动设备上的导航空白

css - 无法让 Bootstrap 4 Horizo​​ntal Form 按要求工作