无法使用 CSS 调整图像大小

Posted 2023-03-05

【中文标题】无法使用 CSS 调整图像大小

【英文标题】：Can't resize image using CSS

【发布时间】：2014-09-21 09:00:06

【问题描述】：

我已经尝试了所有我能找到的网站上的所有答案，但仍然无法使用 CSS 正确调整图像大小。我已经把它放在一个 div 中，并尝试调整其中一个的大小并调整两者的大小。我正在尝试使图像（在我的导航栏下方）适合页面（意思是：与页面一样宽，以及相对高度）。

<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>

第一次尝试：

.myImage
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;

第二次尝试：

#banner
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;

第三次尝试：

<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>

#banner
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;


#myImage
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;

【问题讨论】：

您的尝试出了什么问题？对我来说似乎工作得很好。

你考虑过width:100%吗？你好像只试过max-width。

您可以发布一张屏幕截图或您要调整大小的图片吗？

this answer 是您要找的吗？

【参考方案1】：

如果您的图像小于屏幕，它将使用图像宽度。如果它更大，它使用最大宽度。因此，假设您的图像比显示器小，您希望将“最大宽度”更改为“宽度”以增加图像大小。

<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>

#banner
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;


#myImage
    width: 100%;
    height: auto;
    left: 0px;
    right: 0px;

【讨论】：

@JoseMagana，我希望如此 ;)

【参考方案2】：

CSS 属性 background:cover 会帮助你！

html  
 background: url(images/bg.jpg) no-repeat center center fixed; 
 background-size: cover;

Cover 会将您的背景扩展到全屏。

【参考方案3】：

您必须为 id 横幅指定小于 100% 的特定宽度。您不需要高度，它已经是自动的。您必须定位横幅内的图像，而不是添加到图像的类。所以它应该是这样的：

<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>

#banner
    width: 60%;
    left: 0px;
    right: 0px;


#banner img
    width: 100%;
    left: 0px;
    right: 0px;

【参考方案4】：

CSS-Tricks 有我能找到的最佳解决方案

html  
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

源代码和原始代码的 CSS-Tricks 链接：https://css-tricks.com/perfect-full-page-background-image/

【讨论】：

考虑添加指向您找到此解决方案的原始来源的链接，以便正确引用/注明它们。

【参考方案5】：

您还记得链接到您的样式表吗？我刚刚遇到这个问题，然后我意识到我忘记链接到 CSS 和 face-palm。