0
Son üç ay içinde bir proje üzerinde çalışıyordum ve başka bir şey için durdum, şimdi devam etmek için geri döndüm ve bir sorunla karşı karşıyayım.Css içinde tam bir resim görüntüleme
Ben sorunumu açıklamak başlamadan önce, seni daha sorunumu anlayacaktır ki bu pasajı çalıştırmak için davet ediyorum:
/***************Style.css**************/
/* Circular Content Carousel Style */
.ca-container{
\t position:relative;
\t margin:25px auto 20px auto;
\t width:1200px;
\t height:700px;
}
.ca-wrapper{
\t width: 1200px;
\t height:100%;
\t position:relative;
}
.ca-item{
\t position:relative;
\t float:left;
\t width:330px;
\t height:100%;
\t text-align:center;
}
.ca-item-main{
\t position:absolute;
\t right:80px;
\t bottom:5px;
\t background:#fff;
\t overflow:hidden;
\t width: 325px;
\t -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
\t -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
\t box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
\t width:25px;
\t height:38px;
\t 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;
\t position:absolute;
\t top:50%;
\t margin-top:-19px;
\t left:-40px;
\t text-indent:-9000px;
\t opacity:0.7;
\t cursor:pointer;
\t z-index:100;
}
.ca-nav span.ca-nav-next{
\t background-position:top right;
\t left:auto;
\t right:-40px;
}
.ca-nav span:hover{
\t opacity:1.0;
}
/**********Demo.cs*****************/
@import url('reset.css');
/* General Demo Style */
body{
\t background:#e4ebe9 url(../images/pattern.png) repeat top left;
\t color:#000;
\t font-family: 'PT Sans Narrow', Arial, sans-serif;
\t font-size:12px;
}
a{
\t color:#000;
\t text-decoration:none;
}
.clr{
\t clear:both;
}
h1, h5{
\t margin:15px;
\t font-size:44px;
\t color:#000;
\t font-family: 'Rochester', sans-serif;
\t text-shadow:1px 1px 1px #fff;
\t text-align:center;
}
h1 span, h5{
\t font-size:20px;
\t display:block;
\t color:#60817a;
}<html lang="en">
<head>
\t \t <meta charset="UTF-8" />
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\t \t <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" />
\t \t <meta name="author" content="Codrops" />
\t \t <link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
\t \t <link rel="stylesheet" type="text/css" href="css/style.css" />
\t \t <link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
\t \t <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
\t \t <link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' />
\t \t <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
</head>
<body>
\t \t <div class="container">
\t \t \t <div id="ca-container" class="ca-container">
\t \t \t \t <div class="ca-wrapper">
\t \t \t \t \t <div class="ca-item ca-item-1">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <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="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-2">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <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="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-3">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <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="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
\t \t <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
\t \t <!-- the jScrollPane script -->
\t \t <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
\t \t <script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
\t \t <script type="text/javascript">
\t \t \t $('#ca-container').contentcarousel();
\t \t </script>
</body>
</html>pasajını çalıştırdıktan sonra, üç göreceksiniz bloklar, her bloktaki görüntünün boyutu 380x650'dir. Tüm resmi bloğa görüntülemek istiyorum ama yapamıyorum, Ne zaman denersem, görüntülenecek resmin boyutu 380x650 yerine 375x650'dir. Değerle uğraşıyorum ama iyileşme yok.
Lütfen bu sorunu nasıl düzelteceğimi bana bildirin. ingilizce, Im değil bir yerli ingilizce hoparlör için üzgünüm
, Im Bu width: 380px; ile şimdi nerede ve ok görünüyor
Resimleriniz, ben yeni imajını kullanarak örnek güncellenen ve herhangi bir sorun görmedim, bu bakın ve bana neyin sorun tam olarak bildirin? [Link] (https://jsfiddle.net/9ezu54pk/) – Pedram
Yardımlarınız için teşekkürler. Normalde ".ca-item-main", 380px genişliğe sahip olmalıdır, ancak bu değeri ayarladığımda, her blok arasında bir boşluk elde etmek için bir kenar boşluğu uygulayamıyorum (tıpkı demoda olduğu gibi). –