0
Мне нужно div #slideshow, чтобы обернуть вокруг каждого изображения независимо от размера изображения. Мне не нравятся пробелы на изображениях меньшего размера. Как вы делаете размер изменения div в соответствии с размером изображения? Примечание: пространство вокруг изображения на самом деле является частью изображения, так что оно полностью покрывает изображение под ним. Благодарю.Как сделать div гибким вокруг изображения
http://www.margaretlawrence.com/mlgallery.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Here and There Exhibit
</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color:#dddddd;
}
* body, html
{
height:100%;
}
* {
margin:0;
padding:0;
}
#main {
<!--min-height:100%;
height:auto !important;
height:100%;-->
background-color:#DDDDDD;
width:800px;
margin:0 auto;
text-align:center;
font-family:arial, san-serif, verdana;
font-size:11pt;
margin-top:40px;
}
#slideshow {
position:relative;
width:400px;
height:400px;
max-height:400px;
top:0;
left:0;
border:thin #ddd solid;
border-radius:3px;
box-shadow:2px 2px 5px #333,-2px -2px 5px #333;
-webkit-box-shadow:2px 2px 5px black,-2px -2px 5px black;
-moz-box-shadow:2px 2px 5px black,-2px -2px 5px black;
}
#slideshow img {
z-index:8;
opacity:0.0;
width:400px;
position:absolute;
top:0;
left:0;
}
#slideshow img.active {
z-index:10;
opacity:1.0;
}
#slideshow img.next {
opacity:0.0;
z-index:8;
}
#slideshow img.last-active {
z-index:9;
}
#title {
position:relative;
top:0px;
left:0px;
font-style:italic;
color:black;
width:400px;
margin:0 auto;
text-align:center;
}
#nav {
float:right;
width:120px;
text-align:left;
position:relative;
top:120px;
left:-80px;
}
a:link {
color:black;
}
a:visited {
color:black
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.caps {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-transform: uppercase;
text-align:center
}
#nav a {
font-family:arial, san-serif, verdana;
font-size:10pt;
}
#nav a:hover {
color:white;
text-decoration:none;
}
/*]]>*/
</style><!--[if IE]>
<style type="text/css">
#slideshow {
border:none;
}
</style>
<![endif]-->
<style type="text/css">
/*<![CDATA[*/
table.c2 {margin-top:20px;}
p.c1 {line-height:180%;}
/*]]>*/
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js" type=
"text/javascript">
</script><script src="js/jquery-1.10.2.min.js" type=
"text/javascript">
</script><script type="text/javascript">
//<![CDATA[
function slideSwitch() {
var $active = $('#slideshow img.active');
if ($active.length == 0) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$active.addClass('last-active');
var caption = $next.attr('title');
$("#title").text(caption);
$next.css({
opacity: 0.0
})
.addClass('active').animate({
opacity: 1.0
}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function(){
$("#title").text($('#slideshow img.active').attr('title'));
setInterval(slideSwitch, 5000); // then every 5 seconds
})
//]]>
</script>
<div id="main">
<h2>
Here and There
</h2><br />
<p class="c1">
Exhibition at Greenhut Gallery, Portland Maine, June 2013
</p>
<table width="800" class="c2">
<tr>
<td width="175">
<img src="mltext.gif" width="175" alt="" />
</td>
<td></td>
<td width="25">
<img src="mlspacer.gif" alt="#########" />
</td>
<td width="400" height="400">
<div id="slideshow">
<img class="active" src="images/from_the_porch.jpg"
alt="From the Porch" title=
"From the Porch 36"x 36"" />
<img src="images/awake_first.jpg" alt="Awake First"
title="Awake First 20"x 24"" /> <img src=
"images/evening_on_the_pond.jpg" alt=
"Evening on the Pond" title=
"Evening on the Pond 14"x 14"" /> <img src=
"images/first_light.jpg" alt="First Light" title=
"First Light 36"x 36"" /> <img src=
"images/from_shore.jpg" alt="From Shore" title=
"From Shore 36"x 36"" /> <img src=
"images/heading_north.jpg" alt="Heading North" title=
"Heading North 14"x 14"" /> <img src=
"images/heading_south.jpg" alt="Heading South" title=
"Heading South 14"x 14"" /> <img src=
"images/in_the_valley.jpg" alt="In the Valley" title=
"In the Valley 48"x 48"" /> <img src=
"images/mid_day_on_the_pond.jpg" alt=
"Mid Day on the Pond" title=
"Mid Day on the Pond 24"x 24"" /> <img src=
"images/morning_on_the_mill_pond.jpg" alt=
"Morning on the Mill Pond" title=
"Morning on the Mill Pond 24"x 24"" />
<img src="images/night_walk.jpg" alt="Night Walk"
title="Night Walk 18"x 18"" /> <img src=
"images/on_the_bay.jpg" alt="On the Bay" title=
"On the Bay 18"x 18"" /> <img src=
"images/september_sky.jpg" alt="September Sky" title=
"September Sky 24"x 24"" /> <img src=
"images/the_skys_floor.jpg" alt="The Sky's Floor"
title="The Sky's Floor 48"x 48"" />
<img src="images/watching_the_tide.jpg" alt=
"Watching the Tide" title=
"Watching the Tide 20"x 24"" /> <img src=
"images/after_the_rain_study.jpg" alt=
"After the Rain Study" title=
"After the Rain Study 10"x 10"" />
<img src="images/first_light_study.jpg" alt=
"First Light Study" title=
"First Light Study 10"x 10"" /> <img src=
"images/from_shore_study.jpg" alt="From Shore Study"
title="From Shore Study 10"x 10"" />
<img src="images/from_the_porch_study.jpg" alt=
"From the Porch Study" title=
"From the Porch Study 10"x 10"" />
<img src="images/morning_study.jpg" alt=
"Morning Study" title=
"Morning Study 10"x 10"" /> <img src=
"images/new_view_study.jpg" alt="New View Study"
title="New View Study 10"x 10"" />
<img src="images/night_walk_study.jpg" alt=
"Night Walk Study" title=
"Night Walk Study 10"x 10"" /> <img src=
"images/on_the_bay_study.jpg" alt="On the Bay Study"
title="On the Bay Study 10"x 10"" />
<img src="images/pond1.jpg" alt="Pond 1" title=
"Pond 1 10"x 10"" /> <img src=
"images/pond2.jpg" alt="Pond 2" title=
"Pond 2 10"x 10"" /> <img src=
"images/pond3.jpg" alt="Pond 3" title=
"Pond 3 10"x 10"" /> <img src=
"images/pond4.jpg" alt="Pond 4" title=
"Pond 4 10"x 10"" /> <img src=
"images/rolling_in_study.jpg" alt="Rolling In Study"
title="Rolling In Study 10"x 10"" />
<img src="images/september_sky_study.jpg" alt=
"September Sky Study" title=
"September Sky Study 10"x 10"" /> <img src=
"images/shoreline_study1.jpg" alt="Shoreline Study 1"
title="Shoreline Study 1 10"x 10"" />
<img src="images/shoreline_study2.jpg" alt=
"Shoreline Study 2" title=
"Shoreline Study 2 10"x 10"" />
</div>
</td>
<td width="25">
<img src="mlspacer.gif" alt="#########" />
</td>
<td width="25">
<img src="mlspacer.gif" alt="#########" />
</td>
<td align="left" width="150">
<a href="Lawrence1.html">past works</a><br />
<br />
<br />
<!--<a href="mlbreath.html">past works</a><br /><br />-->
<a href="mlgard1.html">works on paper</a><br />
<br />
<br />
<a href="mlnot.html">paintings</a><br />
<br />
<br />
<a href="mlresume.html">resumé</a><br />
<br />
<br />
<a href="mlhome.html">home</a><br />
<br />
</td>
</tr>
</table><br />
<div id="title"></div>
</div>
</body>
</html>
Спасибо. Это делает изменение div с изображением, но вы до сих пор видите нижнюю часть изображения перед ним. Как мы можем это исчезнуть? –
Просто добавьте 'overflow: hidden' в CSS на div. –
, который работает, но переход изменчив. любой способ сгладить это? –