Css 如何在调整到父div百分比的div中调整图像大小？_Css_Html

Css 如何在调整到父div百分比的div中调整图像大小？

css html

Css 如何在调整到父div百分比的div中调整图像大小？,css,html,Css,Html,图像保持其完整大小，我需要它适合其div 我还想知道我如何能在一个家长内设置两个并排的div，使其保持90%的位置以下是： HTML <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title>

图像保持其完整大小，我需要它适合其div

我还想知道我如何能在一个家长内设置两个并排的div，使其保持90%的位置

以下是：

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="test">
    <div id="test2">
        <div id="test3">
               <div id="image"><img src="ayreon_wallpaper_the_human_equation_brain_1600.jpg" />
               </div>
        </div>
    </div>
</div>
</body>
</html>

将css选择器从

#image

更改为

#image img

例如：

问题是您正在围绕图像调整div的大小，而不是图像本身。通过更新CSS以设置

img

标记的样式，您可以解决这个问题

要设置相邻的div，可以将它们分别设置为

display:inline；宽度：50%

或

浮动：左侧；宽度：50%

阅读更多关于float/inline的内容：

伟人，就是这样，我才知道我不想让图像盲目地跟随窗口大小，而是在随窗口扩展和收缩时显示720或1080大小比（就像VLC视频播放器调整窗口大小一样），以避免内容失真。我猜想，如果我对第一个“div层”应用一个规则，并将后续的部分保持在一定的百分比，它将始终保持图像的完整性。你认为呢？将图像的高度更改为自动，并将宽度保持为百分比，它应该自动缩放以匹配图像的原始比例，因此

#image img{height:auto；}

Justin，我确实将#image img{height:auto；}应用于css，图像在调整大小时确实保持了比例，但它所在的div将其垂直端带到窗口的顶部和底部，并在侧面保持90%。我真正需要的是子div将其高度和宽度保持在指定的百分比，从而保持其纵横比，因为父div具有该条件。如果图像符合它，我将无法让整个网站一起调整大小。谢谢你的支持。如何在问题上放置JPEG？我相信如果我能举例说明，你会得到更好的答案。我不确定你到底在问什么，但答案可能是使用媒体查询将某些宽度捕捉到某些维度。您应该看到一个选项，在编辑帖子时在工具栏中包含一个图像，如果没有，StackOverflow可能已经为新用户禁用了该选项，以防止垃圾邮件。

body{
background:#999;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#test{
width:90%;
height:90%;
background:#1d2122;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
#test2{
width:90%;
height:90%;
background:#3F0;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
#test3{
float:left;
width:90%;
height:90%;
background:#F00;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

#image{
float:left;
width:90%;
height:90%;
background:#F00;
background-size:100%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;