Html Doctype正在忽略百分比_Html_Css

Html Doctype正在忽略百分比

html css

Html Doctype正在忽略百分比,html,css,Html,Css,我在没有使用Doctype的情况下构建了我的页面，但是如果没有Doctype，我可以得到预期的结果我试图列出每行4个图像，并填充页面，即使用户试图调整窗口大小问题是，我最近添加了Doctype，但这里有些东西工作不太好，图像看起来杂乱无章我的页面没有Doctype 我的Doctype页面我的朋友在这里 CSS: HTML 我做错了什么谢谢。高度百分比基于父元素。虽然您的图像photosquare确实有一个百分比高度，但它的父级没有定义的高度看看这把小提琴- 所有图片的高度

我在没有使用Doctype的情况下构建了我的页面，但是如果没有Doctype，我可以得到预期的结果

我试图列出每行4个图像，并填充页面，即使用户试图调整窗口大小

问题是，我最近添加了Doctype，但这里有些东西工作不太好，图像看起来杂乱无章

我的页面没有Doctype

我的Doctype页面

我的朋友在这里

CSS:

HTML

我做错了什么

谢谢。

高度百分比基于父元素。虽然您的图像photosquare确实有一个百分比高度，但它的父级没有定义的高度

看看这把小提琴-

所有图片的高度都是700px，但其中一个在修复问题时是725px。

body{
margin: 0 auto;
}

.photosquare{
height:25%;
width:25%;
float:left;
position:relative;
}

.photosquare img{
height:100%;
width:100%;
float:left;
position:relative;
}

<body>
<div class="first_page">
<div class="photosquare">
<img src="https://unsplash.imgix.net/photo-1428278953961-a8bc45e05f72?fit=crop&fm=jpg&h=700&q=75&w=1050" /> 
</div>
<div class="photosquare">
<img src="https://unsplash.imgix.net/photo-1428278953961-a8bc45e05f72?fit=crop&fm=jpg&h=700&q=75&w=1050" /> 
</div>
</div>
</body>

html {
    height: 100%;
}
body {
    margin: 0 auto;
    height: 100%;
}
.photosquare {
    height:25%;
    width:25%;
    float:left;
    position:relative;
}
.first_page {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.photosquare img {
    height:100%;
    width:100%;
    float:left;
    position:relative;
}