CSS unable to force image width and height - html

Question

I'm trying to display a panoramic image with a specific size and a hidden overflow to eventually enable user-induced panning (the code is not included below).
I'm adding the image this way:
<div class="pan">
<img src="http://lorempixel.com/image_output/sports-q-c-1920-480-7.jpg">
</div>
I am setting the image size parameters this way:
.pan {
width: 800px;
height: 400px;
overflow: hidden;
border: red solid;
}
However, when I change the width, the height changes proportionally, and I don't have any overflow to hide. The image is 13632 × 2936.
This is the result I get from the code above:
When setting the size this way, I get the image below:
.pan {
width: 400px;
height: 400px;
overflow: hidden;
border: red solid;
}
Trying to override img parameters set to 100% (for other purposes), I get a distorted image--still no hidden overflow:
.pan img {
height: 800px;
width: 400px;
transition: opacity .6s linear .8s;
}
Other code related to .pan and a container (from tutorial cited below) :
.pan img{
transition: opacity .6s linear .8s;
}
.pan img.loaded{ opacity: 1; }
.img-pan-container, .img-pan-container img{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.img-pan-container{
position: relative;
overflow: hidden;
cursor: crosshair;
height: 100%;
width: 100%;
}
.img-pan-container img{
-webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);
position: absolute;
top: 0;
left: 0;
}
For info, I am trying to implement this example. However, I am not currently focusing my question on the rest of the panning code, as I am having issues just getting the image sized correctly with the hidden overflow.

Answer 1

The img child has to be larger than the parent .pan, see snippet below with an image of 1920px width and 480px height. But this will crop parts of the image.
Snippet
.pan {
width: 800px;
height: 400px;
overflow: hidden;
border: red solid /* demo */
}
img {
display:block /* fix inline gap */
}
<div class="pan">
<img src="http://lorempixel.com/1920/480/" />
</div>
UPDATE
Based on your updated question, it is most likely you have in your css img set as max-width:100%, see the same snippet above with that property set.
Snippet
.pan {
width: 800px;
height: 400px;
overflow: hidden;
border: red solid /* demo */
}
img {
display:block; /* fix inline gap */
max-width:100% /* YOUR ISSUE */
}
<div class="pan">
<img src="http://lorempixel.com/1920/480/" />
</div>
UPDATE OP's Comment:
This may be the case...How can I override img for only this class?
If you can't find the origin and/or want to keep the max-width:100% for other imgs you can override by using max-width:none on .pan > img
.pan {
width: 800px;
height: 400px;
overflow: hidden;
border: red solid /* demo */
}
img {
display: block; /* fix inline gap */
max-width: 100% /* YOUR ISSUE */
}
.pan > img {
max-width: none
}
<div class="pan">
<img src="http://lorempixel.com/1920/480/" />
</div>

Answer 2

You can try to archive cover effect for image using this css:
.pan {
...
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
JSFiddle here