Html 如何防止我的形象缩水_Html_Css

Html 如何防止我的形象缩水

html css

Html 如何防止我的形象缩水,html,css,Html,Css,当我从左到右或从上到下收缩浏览器窗口时，图像的纵横比会发生变化。我试图给我的图像一个像素的高度，但这样做，图像隐藏了我的'h3'句子这是我的密码笔：这是我代码的一部分： header { height: 100%; width: 100%; } .container-fluid { height: 100%; padding: 0; } .row { height: 100%; } #image { display: flex; flex

当我从左到右或从上到下收缩浏览器窗口时，图像的纵横比会发生变化。我试图给我的图像一个像素的高度，但这样做，图像隐藏了我的'h3'句子

这是我的密码笔：

这是我代码的一部分：

    header {
  height: 100%;
  width: 100%;
}

    .container-fluid {
  height: 100%;
  padding: 0;
}

 .row {
  height: 100%;
}


#image {
  display: flex;
  flex-flow: row, wrap;
  position: relative;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #ed1c24;
}

尝试添加到

#image

规则

对象适合度：cover

，但此解决方案在IE中不起作用。对于IE，您需要找到一个Polyfill。

更新了我的答案：

相关代码：

header {
  height: 100%;
  width: 100%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/9/9b/Red_Hot_Chili_Peppers_2012-07-02_001.jpg);
  background-size: cover;
  border-bottom: 1px solid #ed1c24;
}

当您将图像作为

标记放入HTML中时，您将遇到一些大小调整问题。修复方法是使用图像作为

背景图像

，就像我上面所做的那样

请看一个例子

调整窗口大小时，会在

.headline box

和标题底部之间添加一些空格

它像魔术一样工作，但你怎么能找到一个“Polyfill”为这个？我不知道为什么，但我没有看到你的代码笔中的图像。也许它被删除了。我在5月份试过使用这个代码笔，但图像仍在缩小。@NadavHimmelfarb你能看看我更新的答案吗？我冒昧地修改了你的整个网站，因为我喜欢你的设计，但代码确实杂乱无章。我希望你能欣赏它，如果不是，至少你会喜欢这个答案：）祝你好运！哇，老兄，我等不及要看了，当然！你们真是太酷了！你能重新发送到代码笔的链接吗？这是我更新答案中的第一个。如果您对我所做的更改有任何疑问，请随时回来问我。

[css]相关文章推荐

随机文章推荐