Question

我创建了一个简单的测试网站，用户可以在其中编辑jQuery代码以将图像插入到投资组合中。我已经创建了html和css以及所有内容，但是当我调整屏幕大小时，图像会移动。我希望屏幕能够移动到图像顶部。我怎么能这样做，我试着把位置：绝对;但那没用。所有帮助将不胜感激！谢谢！

HTML：

＆＃13;

<html>
<head>
	<meta charset="UTF-8">
	<title>Portfolio</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" href="style.css">
</head>
<body>	
	<div class="container">
		<div class="imageBlocks">
			<div class="img1">
				<img src="/" alt="Cannot load image">
			</div>
			<p class="label">Brick image</p>
			<a href="#">Read more &gt&gt</a>		
		</div>
		<div class="imageBlocks">
			<div class="img1">
				<img src="/" alt="Cannot load image">
			</div>
			<p class="label">Brick image</p>
			<a href="#">Read more &gt&gt</a>		
		</div>
		<div class="imageBlocks">
			<div class="img1">
				<img src="/" alt="Cannot load image">
			</div>
			<p class="label">Brick image</p>
			<a href="#">Read more &gt&gt</a>		
		</div>
		<div class="imageBlocks">
			<div class="img1">
				<img src="/" alt="Cannot load image">
			</div>
			<p class="label">Brick image</p>
			<a href="#">Read more &gt&gt</a>		
		</div>
		<div class="imageBlocks">
			<div class="img1">
				<img src="/" alt="Cannot load image">
			</div>
			<p class="label">Brick image</p>
			<a href="#">Read more &gt&gt</a>		
		</div>
		<div class="imageBlocks">
			<div class="img1">
				<img src="/" alt="Cannot load image">
			</div>
			<p class="label">Brick image</p>
			<a href="#">Read more &gt&gt</a>		
		</div>
		<div class="imageBlocks">
			<div class="img1">
				<img src="/" alt="Cannot load image">
			</div>
			<p class="label">Brick image</p>
			<a href="#">Read more &gt&gt</a>		
		</div>
	</div>
</body>
</html>

＆＃13;

CSS：

＆＃13;

*{margin:0px;padding:0px;}
body{
	width:80%;
	margin-left:100px;
}
.container{
	width:100%;
}
img{
	height:100px;
	width:200px;
	margin:30px;

}
.imageBlocks{
	height:100px;
	width:200px;
	display:inline-block;
	margin-right:30px;

}
.imageBlocks p{
	font-family:Arial;
	text-align:center;
}
.imageBlocks a{
	font-family:Arial;
	margin-left:50px;
	color:#3CABCE;
	text-decoration: none;
}

＆＃13;

使用Javascript：

＆＃13;

$("document").ready(function(){
//Bellow you can change the images and add new ones!
//<---If you would like to change it, just change the location                             
//The number beside the .img is the the image that will change, from right to left
//  |Image #|               |Location|
$(".img1 img").attr("src", "brick.png");
$(".img2 img").attr("src", "brick.png");
$(".img3 img").attr("src", "brick.png");
$(".img4 img").attr("src", "brick.png");
$(".img5 img").attr("src", "brick.png");
$(".img6 img").attr("src", "brick.png");
$(".img7 img").attr("src", "brick.png");
$(".img8 img").attr("src", "brick.png");
$(".img9 img").attr("src", "brick.png");
$(".img10 img").attr("src", "brick.png");
$(".img11 img").attr("src", "brick.png");
});

＆＃13;

你可以使用任何图像，因为它用css调整大小

另外正如您所看到的，我使用javascript / jquery来更改图像，但是我有更容易学习的方法吗？也许某种类型的配置文件？我只是问，因为有人要求我建立一个这样的网站，他们可以在没有数据库的情况下轻松更改图像。

Answer 1

您需要为容器div设置固定宽度。当调整大小时，当前100％的宽度将使其覆盖100％的窗口 - 因此图像将叠加在最小化上。如果您设置宽度（以像素为单位），它应该保留。如果您知道如何操作，也可以为客户端执行xml文件。

Answer 2

根据您的喜好设置容器min-width，或者如果您希望它始终保持与该值相同的大小width。

https://jsfiddle.net/Ly41gog5/

我创建了一个简单的测试组合站点，但图像会在调整大小时移动

2 个答案: