We Keep Coding

Reduces image by width first, then after max-width, proportionally

I have a image that have 1200 x 200px. On center of this image I have a space with 500 x 200px that is the main content of full image. On each side of this image, I have an additional content. Note: it is on a single image.
If the window width is reduced, then first it should consumes the additional content of the image, but cutting it, keeping image height intact. But if I reduces the window width below of the main content width (in this time, all additional content was cutted off), then now the image should be resized proportionally, affecting the height.
My doubts:
Is possible do it only with CSS?
If not, there are some JS library to do that?
If not, how I should structure the HTML, CSS and JS to do it works?
It's an example banner with full width: Note that is have a main content and two sides with additional content.
This image below should help understand: I tried to simulate a window width resize, on 1200 px, 1000 px and 500 px (that not affect height yet) then by 350 px (that affect and resize image proportionally).

#banner {
background-image: url("http://i.stack.imgur.com/csRha.png");
width: 100%;
height: 200px;
background-repeat: no-repeat;
margin: 0 auto;
display: block;
border: 1px solid red;
}
#media all and (min-width: 1200px) {
#banner {
width: 1200px;
}
}
#media all and (max-width: 1200px) {
#banner {
background-position: 50% 0;
}
}
#media all and (max-width: 500px) {
#banner {
background-size: 240%;
}
}
<div id="banner"></div>

Is possible do it only with CSS?
Yes, and you only need 1 <div>. Treat the image as a background image, positioned dead center with background-position. Then resize the <div> using media queries, setting widths to the designated breakpoints.

You might use a simple media query like this:
#media max-width: 500px {
#your-image {
width: 100vw;
}
}

Use media queries for adding images/elements and changing css.
As for your problem use percentages for re-sizing images.
I suggest to look up progressive enhancement and Responsive design.
Also look up view-port in case you are not using it.
Don't use VW there is not enough support yet in IE,EDGE(no support for VMAX) and Opera mini, ie8 (no support at all).

React js css class background image not visible

I have added a class in react component.
CSS file:
.bg{
background: url('../img/bg.jpg');
border: 2px solid black;
}
React render method:
render() {
return (
<div>
<div className="bg">
Hey This
</div>
</div>
);
}
The browser shows the border and loads the image but image is not visible.
The screenshot is as follows:
Can anyone tell me what I am doing wrong?

This is most likely happening because div.bg does not have a height specified. Because of this, its height fits the text content exactly.
Background images of any size have no affect on the sizing of their parent element. If your goal is to be able to see the entire image, you need to specify a height for div.bg that matches the height of the original image.

Your .bg div is currently of size 0x0 px, this is why the image is not showing. Specify a width and a height to see the image.
For example:
.bg {
height: 300px;
width: 300px;
}
Or more preferably use 100% to have the entire image fit in the div.
.bg {
height: 100%;
width: 100%;
}
As a side note: make sure your background image is not too large and takes much time to load. Large background image size can lead to very bad user experience. Consider using a png image, small image with the repeat attribute, or an svg.

Try changing the background to background-image. Also give the bg class a height and a width. Then finally specify background-size to probably cover. An example would look like
.bg {
background-image: url('../img/bg.jpg');
background-size: cover;
border: 2px solid black;
height: 300px;
width: 300px;
}
This should work as I have tried it.

background-size: contain;
Not sure what the image is, but this would size the image to fit the current div height defined by the text.

Place the img folder in public folder
.css
background: url('/img/bg.jpg');
or
.js
var logo=require("../img/Logo.svg");
<img src={logo} alt="logo"/>

Have you tried switching from
background: url('/img/bg.jpg');
to
background-image: url('/img/bg.jpg');

It's very important to set height, but not in %
Example provided by Yuval is correct and worked fine.
.bg {
height: 300px;
width: 300px;
}

Crop and center arbitrarily-sized image within a div

I have a div within which I would like to put any arbitrarily-sized image, preferably using an img tag rather than the CSS background-image style. I've looked at many other similar questions and none have answered my question.
The way I would like the image to display is this:
If the image is portrait (height is greater than width), the image will have a width of 100% within the div and be vertically centered. The extra height will be outside of the div, but not visible (as in, the image would appear 'cropped'.)
If it is landscape, the properties in #1 would apply, but horizontally instead of vertically.
I do not want to stretch the image. I do want to fill the entire space within the div.
An example of this would be the image boxes that appear on imgur.com.

Try centering it with javascript. Just set the position: absolute, left:50%, top:50% and margin-left:-width/2, margin-top:-height/2

I'm surprised this question doesn't have an easy to find answer anywhere online, but I came up with a (mostly) pure CSS solution that might help someone. The idea is that there are two possible sizes for the image:
Width is 100% of the parent, height is determined by aspect ratio
Height is 100% of the parent, width is determined by aspect ratio
Of these two options, the one that is preferred is simply the bigger one, since the smaller one will leave gaps around the edges. Therefore, we can use a div in between container and image to "calculate" the larger size. Here's my code:
const image = document.getElementById("image");
const sizer = document.getElementById("sizer");
image.onload = () => {
const aspectRatio = image.width / image.height;
sizer.style = `aspect-ratio: ${aspectRatio}`;
};
#container {
position: relative;
overflow: hidden;
width: 400px;
height: 250px;
resize: both;
}
#sizer {
min-width: 100%;
height: 100%;
position:absolute;
left:50%;
top:0px;
transform: translate(-50%,0);
}
#image {
width: 100%;
height: auto;
position:absolute;
left:0;
top:50%;
transform: translate(0,-50%);
}
<div id="container">
<div id="sizer">
<img id="image" src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg"/>
</div>
</div>
Try dragging around the corner of the image to check how it works.
The only JS required is to fix the aspect ratio of the sizer, and it's quite lightweight (only required when the image src is loaded). I believe this will also work across almost all browsers and versions, since the CSS is very basic.
Hope this helps someone!

Center and crop img tag

Just wondering is it possible to use
<div><img src="xxx.jpg" /></div>
to center the image in the browser
List item to maintain it in the center when reduce browser width for responsive layout
when browser with is smaller than the image it will "not" reduce the image size
instead it will crop the image (overflow:hidden) with the scrollbar but still maintain the image center...
is it possible for using img tag to do this?? I know I can perform it easily with background image using css.
but since I'm working on a CMS site and the image is uploaded by client side, so background image is definitely not a solution....

I think point 3 and 4 make it impossible to do this with CSS only as you would have to set the scroll position using CSS, the best I can come up with using CSS only is: jsFiddle and a Fullscreen Demo.
body {
text-align: center;
}
div {
max-width: 100%;
}
img {
margin: 0 -100% 0 -100%;
}
This approach keeps the image in the center at all times, and it kind of doesn't really reduce the image size, but because I've had to use negative margins, you can't scroll the invisible parts into view.
Instead going for a JS approach you could do it this way: jsFiddle and a Fullscreen Demo.
CSS
body {
text-align: center;
}
div {
width: 100%;
overflow-x: auto;
}
JS
$(window).resize(function () {
$("div").scrollLeft(($("img").width() / 2) - ($(this).width() / 2))
});
This approach uses jQuery to ensure the center of the image scrolls into view whenever the browser window is re-sized.

Is there a Vertically Responsive Gallery Plugin? Jquery or Javascript?

Can anyone point me in the direction of a horizontal and vertically responsive gallery slider plugin or Jscript?
I have tried Flexslider1/2, Galleria, various other plugins, but they are all a set width and don't seem to respond to resizing the browser vertically? I have tried changing all the CSS but no luck.
Any help at would be greatly appreciated.
Example (With Flexslider): If you resize the browser horizontally, the images will automatically resize to fit within the browser window. If you resize vertically this will cut off the image vertically.
Aim: When you resize the browser window vertically the image will change width and height to keep ration and fit within the browser window. Same with Horizontal.
Hopefully I have explained this clearly. If you need clarification please ask rather than down voting.

Having a poke around the code in Flexslider I couldn't find anything specifically excluding the possibility of an image resize on vertical window change. The image resize appears to be purely CSS based which then feeds the width/height inforomation into the javascript. It appears you are stuck with a DOM/CSS issue of the browser not resizing an image on a vertical window change and then a little bit of this not being a tested FlexSlider setup.
It'a always been a bit finicky to get all browsers to understand 100% vertical layouts with no vertical scrolling as it's not the normal layout paradigm. Subsequent CSS versions have helped a bit but there's still a big difference between how browsers react and interpret what you mean by 100%.
I took the slider demo and borrowed most of a stack answer to manage the 100% vertical layout and ended up with this with the detail below.
First, change your image CSS properties to scale the height of the layout and set the width auto to keep the correct aspect:
width: auto;
height: 90%;
This works on an image by itself but the FlexSlider javascript adds some extra elements into the page and also defaults some CSS width values in the demo for the horizontal layout.
.flexslider .slides img {width: 100%; display: block;}
becomes
.flexslider .slides { width: 100%; display: block;}
.img {display: block; }
Now you have a slideshow working in Chrome.
Firefox won't apply the images 100% height to the elements containing the like Chrome so I had to step back through all the elements and apply the 100% height rule in CSS
.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }
.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}
You'll see I did the img there as well. And you end up with the page.
One draw back to this solution is you now have an image that will resize past the horizontal size of the screen. You probably need to build something in to cater for this as you will run into issues if you use the basic carousel which is dependendant on the width to work. Also something funky happens when you mouseOut of the screen adding a horizontal scroll bar but I'll leave that one for you. Also try IE at your own risk.
...and this is why I shy away from front end development =)
Sorry that post ended up being a bit of a running commentary of me poking about.

I also wanted an image slider that was vertically responsive (and horizontally). After not finding anything out-of-the-box that worked they way I wanted I started fiddlin'.
Here's the result.
Here's the key elements (go to the jsFiddle for the full demo). It's not quite perfect but should be enough to get you started.
HTML
<div id="fader">
<img src="http://placehold.it/600x600&text=Slide1" >
<img src="http://placehold.it/600x600&text=Slide2" >
<img src="http://placehold.it/600x600&text=Slide3" >
<img src="http://placehold.it/600x600&text=Slide4" >
</div>
CSS
#fader {
position: relative;
width: auto;
height: 100%;
}
#fader a {
display:block;
width:auto;
height:100%;
}
#media screen and (orientation: portrait) {
img {
width: 100%;
height:auto !important;
}
}
#media screen and (orientation: landscape) {
img {
height: 100%;
min-width:10%;
max-width:100%;
}
}
Special thanks to this jsFiddle for the lightweight jQuery rotator.