时间戳

首页 > 解决方案 > 图像不会使用 CSS 和 HTML 代码调整大小或调整

html - 图像不会使用 CSS 和 HTML 代码调整大小或调整

问题描述

所以我一直在尝试很多代码来完成这项工作，但我的 Squarespace 网站似乎没有任何效果。

我不是网页设计师也不是开发人员，但我也在努力学习，这种“简单”的代码看起来很简单，但很难。即使我更换图像，它仍然保持相同的大小。

请在此处查看代码：

CSS：

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container img {
  width: 100%;
  height: auto;
}
</style>

html:

<div class="container">
  <img src="https://cdn.pixabay.com/photo/2019/09/26/14/04/etretat-4506072_1280.jpg" alt="landing page" width="1500" height="528">
  <button class="btn">Learn More</button>
</div>

</body>
</html>

很高兴听到你的想法。非常感谢，我现在很沮丧。

标签： htmlcssimage

解决方案

我可以帮助你。我用 HTML 修复了你的代码。对于图像大小调整，您应该使用“px”。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
.container {
  position: relative;
  width: 100%;
  max-width: 200px;
}

.container img {
 width:100px;
 height:100px;
}
</style>
<h1>Html:</h1>

<div class="container">
  <img src="https://cdn.pixabay.com/photo/2019/09/26/14/04/etretat-4506072_1280.jpg" alt="landing page" width="1500" height="528">
  <button class="btn">Learn More</button>
</div>

</body>
</html>

推荐阅读