chuha chuha - 3 years ago 301
HTML Question

div image is overriding other images in other div

I have one big image whose size is unknown to me. size varies with every image so i cant define the width and height of images. but the image is in particular div and i expect it to be in its div but it overflows and shown above other images,. however in dreamweaver it shows as expected.

http://way2enjoy.com/touch/w2et/photos-slideshow.php/2786608/hill-photo


the css of that div is

.detail_view_m {margin: 0 auto;position: relative;text-align: center;}


any help will be highly appreciated

Answer Source

Do you need those images to show has a thumbnail (maybe slider) or you need that each div use it's child image dimensions?

Case 1: set dimensions for your divs, use each image has a background-image and use background-size:cover; to make sure that each image will fit in your div keeping its aspect ratio

.detail_view_m {
width:400px;
height:400px;
background-size:cover;
}

<div class="detail_view_m" style="background-image:url(http://way2enjoy.com/touch/w2et/photos-slideshow.php/2786608/hill-photo)">
</div>

Case 2: Show each image has a block and your divs will use those dimensions

.detail_view_m img{
display:block;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download