CSS/HTML图像不响应宽度和文本对齐

所以我一直在努力让自己成为一个个人投资组合，但我遇到了一些问题。每当我尝试使用CSS3中的

width

调整图像大小时，我的图像都没有响应。我尝试过将其大小调整为25%、50%、75%，但没有任何效果

这是我的密码：

正文{
边际：0px；
背景色：白色；
}
.集装箱{
显示：网格；
网格模板列：1fr；
}
/*导航样式*/
.品牌{
字体系列：“Titillium Web”；字体大小：15px；
}
.导航包装器{
显示器：flex；
证明内容：之间的空间；
填充：38px；
}
.左侧{
显示器：flex；
}
.nav wrapper>左侧>div{
右边距：20px；
字号：0.9em；
文本转换：大写；
}
.nav链路包装器{
字体系列：“Titillium Web”；字体大小：15px；
高度：22px；
边框底部：1px实心透明；
过渡：边界底部0.5s；
}
.nav链路包装器a{
颜色：#8a8a8a；
文字装饰：无；
过渡：颜色0.5s
}
.nav链接包装器：悬停{
边框底部：1px纯黑；
}
.nav链接包装器a：悬停{
颜色：黑色
}
/*关于页面样式*/
.profile图像包装器{
文本对齐：居中；
宽度：50%；
}
.profile内容包装器{
填充：30px；
文本对齐：居中；
}
.profile内容包装器h1{
颜色：黑色；
字体系列：“Titillium Web”；字体大小：22px；
}
.profile内容包装器{
颜色：黑色；
字体系列：“Titillium Web”；字体大小：15px；
}
.profile内容包装器h4{
颜色：黑色；
字体系列：“Titillium Web”；字体大小：15px；
}

米卡的投资组合
陈美嘉
嘿！

现在你已经快速浏览了我的网站，想雇用我为你创建自己的网站！


谢谢，祝你今天愉快。

GMAIL：

mikayxtan@gmail.com

试试看：

 .profile-image-wrapper img{
     width:15%
  }

---

为了使图像具有响应性，您应该立即给它一个

最大宽度：100%

，它跟随容器的宽度，并保持在容器内。因此，添加这段新代码

.profile-image-wrapper img {
  max-width: 100%;
}

现在，图像将按照您的要求填充50%的宽度。现在，如果你想要你的图像在中间，宽度为50%，只需添加<代码>空白：0自动；<代码>到图像包装器，您应该可以开始了

.profile-image-wrapper {
    text-align: center;
    width: 50%;
    margin: 0 auto;
}

如果希望图像的填充宽度为50%，则可以将宽度从包装中移除50%

将50%的宽度应用于包装

如果包装上没有50%的宽度，它看起来就像这样

请注意，在这两种情况下，图像都是响应的，这是因为您在

img

标记中添加了

max width:100%

---

那不是你要找的？请让我知道并显示所需输出的屏幕截图。

请设置

边距：0自动

用于

。配置文件图像包装器

选择器，用于水平居中

请设置

显示：内联块CSS在
.profile image wrapper img
选择器中

更新的代码片段：-



米卡的投资组合
身体{
边际：0px；
背景色：白色；
}
.集装箱{
显示：网格；
网格模板列：1fr；
}
/*导航样式*/
.品牌{
字体系列：“Titillium Web”；字体大小：15px；
}
.导航包装器{
显示器：flex；
证明内容：之间的空间；
填充：38px；
}
.左侧{
显示器：flex；
}
.nav wrapper>左侧>div{
右边距：20px；
字号：0.9em；
文本转换：大写；
}
.nav链路包装器{
字体系列：“Titillium Web”；字体大小：15px；
高度：22px；
边框底部：1px实心透明；
过渡：边界底部0.5s；
}
.nav链路包装器a{
颜色：#8a8a8a；
文字装饰：无；
过渡：颜色0.5s
}
.nav链接包装器：悬停{
边框底部：1px纯黑；
}
.nav链接包装器a：悬停{
颜色：黑色
}
/*关于页面样式*/
.profile图像包装器{
文本对齐：居中；
宽度：50%；边距：0自动；
}
.profile图像包装器img{宽度：50%；显示：内联块；}
.profile内容包装器{
填充：30px；
文本对齐：居中；
}
.profile内容包装器h1{
颜色：黑色；
字体系列：“Titillium Web”；字体大小：22px；
}
.profile内容包装器{
颜色：黑色；
字体系列：“Titillium Web”；字体大小：15px；
}
.profile内容包装器h4{
颜色：黑色；
字体系列：“Titillium Web”；字体大小：15px；
}
陈美嘉
嘿！

现在你已经快速浏览了我的网站，想雇用我为你创建自己的网站！


谢谢，祝你今天愉快。

GMAIL：

mikayxtan@gmail.com

请将宽度添加到实际img而不是父img？我想你的父母会允许你