0

I have plugin which is working fine but when the browser size(changes) decreases, the width of images is decreasing as per browser screen size but height of image is not decreasing.

Following is the code:

 <div id="smart-gallery">
        <a href="images/cubagallery-img-1.jpg" title="First Image">
            <img src="images/cubagallery-img-1.jpg" /></a> 

            <a href="images/cubagallery-img-2.jpg"
                title="Second Image">
                <img src="images/cubagallery-img-2.jpg" /></a> <a href="images/cubagallery-img-3.jpg"
                    title="Third Image">
                    <img src="images/cubagallery-img-3.jpg" /></a> <a href="images/cubagallery-img-4.jpg"
                        title="Fourth Image">
                        <img src="images/cubagallery-img-4.jpg" /></a> <a href="images/cubagallery-img-5.jpg"
                            title="Fifth Image">
                            <img src="images/cubagallery-img-5.jpg" /></a> 
    </div>

Following is css for above code..

.min-gallery
{
    max-width: 1400px;
    height: 630px;
    margin: auto;
}
.min-gallery .preview
{
    max-width: 1300px;
    height: 493px;
    margin-top: 36px;
    margin-left: 36px;
    margin-right: 36px;
    position: relative;

    overflow: hidden;
    background-color: White;
}

In above both class i changed width to max-width and because of this image size changes as per browser screen size. But height of image is not changing, it is fixed. For this I changed the property, height to max-height at that time the image is getting vanished(means image height becoming 0px). And when it changed to min-height, the image height is not increasing when browser screen size is increased.

I did Google very much but I am not getting how to resolve this issue. Please can anyone help me out to resolve this issue. Thanks in advance.

4

1 回答 1

0

在 .min 类中制作最大高度而不是正常高度，我认为应该解决它。

  .min-gallery{ max-width: 1400px;
max-height: 630px;
margin: auto;

}

于 2013-06-18T07:30:38.340 回答