Question

我似乎无法将图像保留在div元素中。图像在它外面伸展。我似乎无法找到错误的来源并进行了大量的研究，但仍然找不到来源。一些帮助会很棒！

这是我的HTML / CSS ...

＆＃13;

try
{
    actorRef = await actorSelection.ResolveOne(TimeSpan.FromMilliseconds(3000));
}
catch (ActorNotFoundException)
{
    actorRef = Actor.EwmsActorSystem.ActorOf<T>(actorId);
}

＆＃13;

.navigation {
	padding-top: 70px;
	padding-bottom: 70px;
	position: relative;
	text-transform: uppercase;
	
}
.container {
	
	
}

.brand-text {
	font-family: Georgia, Times, 'Times New Roman', serif;
	font-size: 40px;
	font-weight: 700px;
	color: black;
	-webkit-transition: color 700ms ease;
	text-align: center;
	
}

.brand-text:hover {
	color: grey;
	
}
.nav-brand {
	text-decoration:none;
}

.nav-menu {
	text-align: center;
}

.nav-link {
	padding-top: 7px;
	padding-bottom: 7px;
	margin-right: 20px;
	margin-left: 20px;
	text-decoration: none;
	color: black;
	font-family: Georgia, Times, 'Times New Roman', serif;
	-webkit-transition: color 700ms ease;
	position: relative;
}

.nav-link:hover {
	color: grey;
}

/*Gallery*/

a {
	text-decoration: none;
	
}

div.img {
	margin: 5px;
	float: left;
	width: 180px;
	-webkit-transition: opacity 400ms ease, box-shadow 400ms ease;
	transition: opacity 400ms ease, box-shadow 400ms ease;
	background-color: #fff;
}

div.img:hover {
	background-color: transparent;
	box-shadow: 0 0 50px -14px #000;
	opacity: 0.8;
	
}

div.img img {
	width: 100%
	height: auto;
}

div.desc {
	text-align: center;
	color: black;
	padding: 15px;
}

* {
	box-sizing: border-box;
}

@media only screen and (max-width: 700px){
	.reponsive {
		width: 49.999999%;
		margin: 6px;
	}
}

@media only screen and (max-width: 500px){
	.responsive {
		width: 100%
	}

}

.clearfix:after {
	content: "";
	display: table;
}

＆＃13;

Answer 1

试

img{
  max-width: 100%;
  height: auto;
}

这会将你的img保留在其容器中

Answer 2

您忘记了;定义中的div.img img：

div.img img {
    width: 100%;
    height: auto;
}

.navigation {
	padding-top: 70px;
	padding-bottom: 70px;
	position: relative;
	text-transform: uppercase;
	
}
.container {
	
	
}

.brand-text {
	font-family: Georgia, Times, 'Times New Roman', serif;
	font-size: 40px;
	font-weight: 700px;
	color: black;
	-webkit-transition: color 700ms ease;
	text-align: center;
	
}

.brand-text:hover {
	color: grey;
	
}
.nav-brand {
	text-decoration:none;
}

.nav-menu {
	text-align: center;
}

.nav-link {
	padding-top: 7px;
	padding-bottom: 7px;
	margin-right: 20px;
	margin-left: 20px;
	text-decoration: none;
	color: black;
	font-family: Georgia, Times, 'Times New Roman', serif;
	-webkit-transition: color 700ms ease;
	position: relative;
}

.nav-link:hover {
	color: grey;
}

/*Gallery*/

a {
	text-decoration: none;
	
}

div.img {
	margin: 5px;
	float: left;
	width: 180px;
	-webkit-transition: opacity 400ms ease, box-shadow 400ms ease;
	transition: opacity 400ms ease, box-shadow 400ms ease;
	background-color: #fff;
}

div.img:hover {
	background-color: transparent;
	box-shadow: 0 0 50px -14px #000;
	opacity: 0.8;
	
}

div.img img {
	width: 100%;
	height: auto;
}

div.desc {
	text-align: center;
	color: black;
	padding: 15px;
}

* {
	box-sizing: border-box;
}

@media only screen and (max-width: 700px){
	.reponsive {
		width: 49.999999%;
		margin: 6px;
	}
}

@media only screen and (max-width: 500px){
	.responsive {
		width: 100%
	}

}

.clearfix:after {
	content: "";
	display: table;
}

<!DOCTYPE html>
<html>
<head>
	<title>Josh Corbett</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
	<div class="navigation">
		<div class="container">
			<a class="nav-brand" href="#"><h1 class="brand-text">Josh Corbett</h1></a>
			<nav class="nav-menu" role="navigation">
				<a class="nav-link" href="#">Portfolio</a>
				<a class="nav-link" href="#">About</a>
				<a class="nav-link" href="#">Contact</a>
				<a class="nav-link" href="#">Blog</a>
			</nav>
		</div>
	</div>
	<div class="responsive">
		<div class="img">
		<a target="_blank" href="#">
			<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
			<div class="desc">Beautiful Montain</div>
		</a>
		</div>
	</div>

</body>

Answer 3

您明确将图像宽度和高度设置为width =“300”height =“200”

因此，您已经在CSS上指定了图像宽度。改变这个：

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">

到此

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain">

（删除宽度和高度属性）

Answer 4

你失踪了;在图像宽度的末端。

div.img img {
    width: 100%;
    height: auto;
}

Answer 5

我不确定这是否是你想要的，但你可以尝试将图片元素大小属性更改为100％。

所以改变这一行：

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">

对此：

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="100%" height="100%">

图像不在我的div内

5 个答案: