Current Scenario:
I am working within the Bootstrap framework, meaning that everything needs to be responsive to fit within the column container.
I have images that are in a 16:9 ratio, but I need them clipped to be around 40:27 while still being responsive as per the requirements above.
After researching clipping and masking options, it seems that neither will work without customizing the code based on the site's width. However, since I aim for a completely fluid site, this is not a viable option.
Does anyone have any suggestions?
Additional Information: The source images are always 1920x1080.
Update: I have created a fiddle with my concept at http://jsfiddle.net/sckdd6hq/1/. My idea was to use standin.png to define the container size, so the background image should resize to fit within it. Now, the question is how can I adjust the background size to the correct height and center it within the resulting container?
Here is the HTML code:
<div class="container">
<div class="flexcon>
<img src="http://s28.postimg.org/l0hz0do5p/standin.png" />
</div>
</div>
And here is the CSS:
.flexcon {
background-image: url("http://s1.postimg.org/ffw8n4yjz/Google_Logo_Loop_GIF_01.gif");
background-size: 100% 100%;
}
.container {
width: 400px;
}