在css中显示完整图像

时间：2016-03-28 15:50:19

标签： html css

我最近三个月正在做一个项目，我停下来做其他事情，现在我回来继续，我面临一个问题。

在我开始解释我的问题之前，我会邀请您运行此代码段，以便您更了解我的问题：

/***************Style.css**************/

/* Circular Content Carousel Style */
.ca-container{
	position:relative;
	margin:25px auto 20px auto;
	width:1200px;
	height:700px;
}
.ca-wrapper{
	width: 1200px;
	height:100%;
	position:relative;
}
.ca-item{
	position:relative;
	float:left;
	width:330px;
	height:100%;
	text-align:center;
}
.ca-item-main{
	position:absolute;
	right:80px;
	bottom:5px;
	background:#fff;
	overflow:hidden;
	width: 325px;
	-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
	width:25px;
	height:38px;
	background:transparent url(https://photos-2.dropbox.com/t/2/AADIMMteRhEB2NiHzX_Z0MquXnxppt4ivpdmarz52rDyOQ/12/226666032/png/32x32/1/_/1/2/arrows.png/EO2pmKoBGH0gAigC/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY?size=1024x768&size_mode=3) no-repeat top left;
	position:absolute;
	top:50%;
	margin-top:-19px;
	left:-40px;
	text-indent:-9000px;
	opacity:0.7;
	cursor:pointer;
	z-index:100;
}
.ca-nav span.ca-nav-next{
	background-position:top right;
	left:auto;
	right:-40px;
}
.ca-nav span:hover{
	opacity:1.0;
}

/**********Demo.cs*****************/


@import url('reset.css');

/* General Demo Style */
body{
	background:#e4ebe9 url(../images/pattern.png) repeat top left;
	color:#000;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:12px;
}
a{
	color:#000;
	text-decoration:none;
}
.clr{
	clear:both;
}
h1, h5{
	margin:15px;
	font-size:44px;
	color:#000;
	font-family: 'Rochester', sans-serif;
	text-shadow:1px 1px 1px #fff;
	text-align:center;
}
h1 span, h5{
	font-size:20px;
	display:block;
	color:#60817a;
}
<html lang="en">
    <head>
        
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Circular Content Carousel with jQuery" />
        <meta name="keywords" content="jquery, conent slider, content carousel, circular, expanding, sliding, css3" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
    </head>
    <body>
		<div class="container">
			<div id="ca-container" class="ca-container">
				<div class="ca-wrapper">
					<div class="ca-item ca-item-1">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-2">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-3">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<!-- the jScrollPane script -->
		<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
		<script type="text/javascript">
			$('#ca-container').contentcarousel();
		</script>
    </body>
</html>

运行代码段后，您将看到三个集团，每个集团中的图片大小为380x650。我想在集团中显示整个图像，但我无法，每当我尝试，将显示的图像的大小是375x650，而不是380x650。 我一直在玩这个价值但没有改善。

请告诉我如何解决此问题。

对不起英语，我不是英语母语人士，我尽我所能

1 个答案:

答案 0 :(得分：0)

现在使用width: 380px;，看起来不错。

/***************Style.css**************/
.ca-item-main .wrapper img {
    width: 100%;
}
/* Circular Content Carousel Style */
.ca-container{
	position:relative;
	margin:25px auto 20px auto;
	width:1200px;
	height:700px;
}
.ca-wrapper{
	width: 1200px;
	height:100%;
	position:relative;
}
.ca-item{
	position:relative;
	float:left;
	width:380px;
	height:100%;
	text-align:center;
      margin: 0 5px 0 5px;
}
.ca-item-main{
	position:absolute;
	right:80px;
	bottom:5px;
	background:#fff;
	overflow:hidden;
	width: 380px;
	-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
	width:25px;
	height:38px;
	background:transparent url(https://photos-2.dropbox.com/t/2/AADIMMteRhEB2NiHzX_Z0MquXnxppt4ivpdmarz52rDyOQ/12/226666032/png/32x32/1/_/1/2/arrows.png/EO2pmKoBGH0gAigC/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY?size=1024x768&size_mode=3) no-repeat top left;
	position:absolute;
	top:50%;
	margin-top:-19px;
	left:-40px;
	text-indent:-9000px;
	opacity:0.7;
	cursor:pointer;
	z-index:100;
}
.ca-nav span.ca-nav-next{
	background-position:top right;
	left:auto;
	right:-40px;
}
.ca-nav span:hover{
	opacity:1.0;
}

/**********Demo.cs*****************/


@import url('reset.css');

/* General Demo Style */
body{
	background:#e4ebe9 url(../images/pattern.png) repeat top left;
	color:#000;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:12px;
}
a{
	color:#000;
	text-decoration:none;
}
.clr{
	clear:both;
}
h1, h5{
	margin:15px;
	font-size:44px;
	color:#000;
	font-family: 'Rochester', sans-serif;
	text-shadow:1px 1px 1px #fff;
	text-align:center;
}
h1 span, h5{
	font-size:20px;
	display:block;
	color:#60817a;
}
<div class="container">
			<div id="ca-container" class="ca-container">
				<div class="ca-wrapper">
					<div class="ca-item ca-item-1">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="https://www.dropbox.com/static/images/lockbox.png"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-2">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="https://www.dropbox.com/static/images/lockbox.png"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
					
					<div class="ca-item ca-item-3">
						<div class="ca-item-main">
							<div class="wrapper">
								<img src="https://www.dropbox.com/static/images/lockbox.png"  alt="" />
								
								<div class="overlay">
									<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

相关问题
最新问题