Hi guys,

I've been testing my website mainly with Google Chrome, and it happens that today I tried it with firefox and IE. With Firefox everything is fine, but with IE most of my images get resized to the original image size (from the file). That happens with my partial views. Here is my code:

@inherits UmbracoViewPage<Lecoati.LeBlender.Extension.Models.LeBlenderModel>

@foreach(var item in Model.Items) 
{
    <ul class="caption-style-1">
        <a [email protected](item.GetValue<string>("newPage")).Url>
            <li> 
                <img [email protected](item.GetValue<string>("photo")).Url width="100%" height="100%"/>
                <div class="caption">
                    <div class="blur-profile"></div>
                    <div class="caption-text-profile">
                        <div class="name">@Html.Raw(item.GetValue("name"))<br></div>
                        <div class="job-title">@Html.Raw(item.GetValue("title"))</div>
                    </div>
                </div>
            </li>
        </a>
    </ul>
}

And here is my CSS:

.caption-style-1 {
    max-width:100%;
    max-height:100%;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.caption-style-1 li {
    max-width:100%;
    max-height:100%;
    float: left;
    padding: 0px;
    position: relative;
    overflow: hidden;
}

.caption-style-1 li:hover .caption {
    max-width:100%;
    max-height:100%;
    opacity: 1;
}

.caption-style-1 img {
    zoom:2;
    max-width:100%;
    max-height:100%;
    margin: 0px;
    padding: 0px;
    float: left;
    z-index: 4;
}

.caption-style-1 .caption {
    width:100%;
    height:100%;
    cursor: pointer;
    position: absolute;
    opacity: 0;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    -ms-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

.caption-style-1 .blur-profile {
    border-radius: 50%;
    width:100%;
    height:100%;
    background-color: rgba(64,189,179,0.8);
    z-index: 5;
    position: absolute;
}

.caption-style-1 .blur {
    width:100%;
    height:100%;
    background-color: rgba(64,189,179,0.8);
    z-index: 5;
    position: absolute;
}

.caption-style-1 .caption-text-profile {
    z-index: 10;
    color: #fff;
    position: absolute;
    vertical-align: middle; 
    text-align: center;
    padding: 40% 0 0 5%;
}

.caption-style-1 .caption-text {
    padding: 0 25px 0 0;
    z-index: 10;
    color: #fff;
    position: absolute;
    text-align: left;
}

Any idea about how is this happening?

Thank you very much!