gpt4 book ai didi

HTML/CSS - 使用父 div 缩放图像

转载 作者:行者123 更新时间:2023-11-28 07:31:25 26 4
gpt4 key购买 nike

我是 stackoverflow 的新手。

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

我已经阅读了我能找到的所有主题,但没有一个答案能解决我的问题?我一定是做错了什么。

这是我的 CSS 和 HTML:

*{
-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;
}
<!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>

我的意图是图像将保持在宽高比范围内,但会随着屏幕尺寸缩放到其容器的尺寸。相反,高度比容器大得多,并且随着窗口大小的减小,图像被严重挤压。

我认为以像素为单位设置图像的最大高度(而不是百分比)实际上会改变图像高度,但这仍然会完全忽略容器大小并且不会响应窗口大小。

我完全被难住了?

感谢您的帮助:)

最佳答案

您可能正在寻找 'max-height''max-width' .它有助于保持纵横比。

max-width 保持为容器的宽度,将 max-height 保持为容器的高度。

关于HTML/CSS - 使用父 div 缩放图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31492387/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com