Question

我正在努力解决这几个小时的新问题，并且无法做到正确。我的CSS技能是纯粹的，所以请理解。

所以我想要实现的是我在网站上有图像，当我改变浏览器窗口的大小时，图像大小必须调整到浏览器大小，因此可以看到整个图像。图像也必须位于页面的中心。谢谢你的帮助。

的index.php：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title>James Laycock</title>
</head>
<body>
<div id="main">
<div id="content">
<div id="image_container">
<a href="index.php?page=1"><img src="images/01.jpg" class="image" /></a></div>
</div></div></body></html>

的style.css：

body{
margin: 0; 
padding: 0; 
padding-top: 10px;
text-align: center;}

#main {
height: 90%;
width: 1000px;
position: absolute;
border: 0px;
padding: 0;
margin: 0 auto;}

#content{
height: 90%;
width: auto;
margin-top: 10px;
margin-right:10px;}

#image_container{
height: 100%;
max-height:100%;
width: auto;}

.image{
height: 100%; 
width: auto;}

Answer 1

尝试放置图像容器

text-align：center

并且，在实际图像上放置高度/宽度百分比。

编辑：不要忘记将图像容器居中，或将其宽度设置为全屏。

使图像适合CSS中的浏览器大小

1 个答案: