Question

我是stackoverflow的新手。

我对HTML或CSS没有任何经验，但我目前正在学习一些教程，并发现自己很难让图像保持在其父div的边界内。

我已经阅读了所有可以找到的主题，但没有一个答案可以解决我的问题？我一定是做错了。

这是我的CSS和HTML：

＆＃13;

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.title{
  border-style: solid;
}
.first_box{
  display:flex;
  max-height:500px;
  max-width:500px;
  border-style: solid;
}
.screenshot{
  max-height:50%;
  max-width:50%;
  border-style: solid;
}
.description{
  max-height: 50%;
  max-width: 50%;
  border-style: solid;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>This is the website name.</title>
</head>
<body>
	<h1 class="title">Major Header</h1>
	<div class="first_box">
		<img class="screenshot" src="Link.jpg" alt="Image of Toon Link">
		<div class="description">This is Toon Link. Yada Yada Yada. Text Text Text</div>
	</div>
</body>
</html>

＆＃13;

我的意图是图像保持在宽高比范围内，但随着屏幕尺寸的增大而达到其容器的大小。相反，高度比容器大得多，当窗口尺寸减小时，图像会出现可怕的压缩。

我认为设置图像的最大高度（以像素为单位）（而非百分比）实际上会改变图像高度，但这仍然完全忽略了容器大小，并且对窗口大小没有响应。

我完全难过了？

感谢您的帮助：）

Answer 1

您可能正在寻找'max-height'和'max-width'。它有助于保持宽高比。

将max-width保持在容器的宽度，将max-height保持在容器的高度。

Answer 2

你应该尝试在html和body中添加一个维度控件。

例如，CSS将包括：

html, body {
    width:100%;
    height:100%;
}

然后

.first_box{
  height:50%;
  display:flex;
  max-height:500px;
  max-width:500px;
  border-style: solid;
}
.screenshot{
  height:50%;
  width:auto;
  border-style: solid;
}

这会改善您的布局，遗憾的是该代码段无法显示图片。

HTML / CSS - 使用父div

2 个答案: