Hide background-image overflow equally from left and right - css

Question

Lets say I have a div with width of 100px and I have an image with UNKNOWN width.
Is there any way that I set the image as the background of the div with the following requirements:
If the image is wider than div HIDE overflow from both sides of the image EQUALLY
If the image is smaller or equal of the div make it 100% of the width of the div

Answer 1

A CSS background-image won't afford you this level of flexibility, but you can approximate it with an <img>:
div {
/* We'll be positioning the <img> relative to the <div>. */
position: relative;
/* Don't let an oversized background image stretch out the <div>. */
overflow: hidden;
}
div>img {
/* Since the image is an <img> element and not a background-image,
we don't have to worry about it shrinking, but we do need to
explicitly make it no smaller than the containing <div>. */
min-width: 100%;
/* Don't get in the way of positioning other elements. */
position: absolute;
/* Move the left edge of the image to the center of the <div>, then
shift it back by half the width of the <img>. Result: centered
image. */
left: 50%;
transform: translateX(-50%);
/* It's supposed to be a background image, so put it behind other
content. */
z-index: -1;
}
/* The rest is just for the sake of this example. */
div {
color: red;
border: 1px solid red;
resize: both;
}
<div>
<img src="https://i.stack.imgur.com/xXLKG.png">
Try resizing this <div>!
</div>

Answer 2

background image is not able scale size with container.

Answer 3

Making the content width : 100% of its parent will work here!
.fixSize{
width:500px;
}
.image{
width:100%
}
<!-- Now if i have a large image width:2500px -->
<div class="fixSize">
<img class= "image" src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" alt="Large Image">
</div>
<!-- Now if i have a small image width:256px -->
<div class="fixSize">
<img class= "image" src="https://digitalpadm.com/wp-content/uploads/2017/07/Logarithmic-Image-Gray-level-Transformation-digitalpadm.bmp" alt="">
</div>

Answer 4

Here's an easy fix with JavaScript
Html code
<div id="dv">
<img id="img" src="yourImageSource"/>
</div>
CSS code
#dv {
width: 100px;
height: auto;
min-height: 200px;
overflow: hidden;
border: 2px solid black;
box-sizing: border-box;
}
#img {
height: 200px;
}
JavaScript code
window.onload = ()=>{
var a = document.getElementById("dv");
var b = document.getElementById("img")
var c = a.getBoundingClientRect().width;
var d = b.getBoundingClientRect().width;
if(c < d){
b.style.marginLeft = (c - d)/2 + "px";
b.style.width = "auto";
} else {
b.style.marginLeft = "0px";
b.style.width = "100%";
}
}