Develop Reference

css image max-height has no effect unless I change the max-width

I am a fullstack developer but css is my my weak point so I decided to put more effort on it. I have a weird situation and could not figure out why. The issue is I could not adjust the image height and wide properly. I m using reactstrap, bootstrap and scss but i make sure that bootstrap code will not overwrite my css:
import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/main.scss";
here is the part of html:
<Col md="6">
<div className="hero-section">
<div className={`flipper ${isFlipping ? "isFlipping" : ""}`}>
<div className="front">
<div className="hero-section-content">
<h2> Full Stack Web Developer </h2>
<div className="hero-section-content-intro">
Have a look at my portfolio and job history.
</div>
</div>
<img
alt="programming welcome picture"
className="image"
src="/images/original.png"
/>
<div className="shadow-custom">
<div className="shadow-inner"> </div>
</div>
</div>
</Col>
here is the related css code:
.hero-section {
h2 {
color: black;
font-weight: bold;
margin-bottom: 10px;
}
perspective: 10rem;
color: black;
font-weight: bold;
width: 40rem;
position: relative;
&-content {
position: absolute;
bottom: 20px;
width: 360px;
left: 6%;
z-index: 1;
&-intro {
font-size: 17px;
}
}
}
.image {
max-width: 100%;
// background-size: cover;
max-height: 50%;
position: relative;
background-position: center;
}
with this I have this:
however with this .image
.image {
max-width: 100%;
// background-size: cover;
// max-width: 100%;
max-height: 100%;
position: relative;
background-position: center;
}
I have same view. height changes if I change the width but i just want to change the height.
image css i am having this
with this .image
.image {
max-height: auto;
max-width: 100%;
background-position: center;
background-size: cover;
}
i am getting text outside the image :( even though the max-width: 100% it is not as wide as first image :(

[Edit]: I forgot I am the only one on this earth that allowed to have a well working stackblitz so just in case here is the code :
<div className="content">
<h2>FullStack developerdfghbdfg</h2>
<p>Were you looking for something like this ?</p>
</div>
And the CSS part :
.content {
padding: 15px;
padding-top: 200px;
max-width: 200px;
background-image: url('https://picsum.photos/200/300'); /* you need an HD image to do this */
background-size: cover; /* because thiswill strech your image */
color: red; /* pretty disgusting yeah ! */
}
Are you looking for something like this ? Stackblitz example
If not, can you provide the shape of your image please ? I mean, is it a loooong vertical image full of blue, or is it just the boy and screen and books and stuff and a background color set to the same blue for your container ?

why is the text outside the image?
TL;TD: the image is narrower than 40rem.
Here's the too long to read version:
by setting max-width to 100%, the image would allow itself to take 100% of its intrinsic width, but since the height is set to auto, the image width would be dictated by the intrinsic height of the image, making it a fractional width from 100%.
why is image wider and taller from your 1st scenario below?
.image {
// allows the image to take up 100% of its width
max-width: 100%;
// allows the image to take up 100% of its height
max-height: 100%;
...
}
the image is taking up the intrinsic width/height values since the <img> element is a replaced element type and its object-fit css property is not defined.
resolution 1
set div.hero-section to a fixed width and height, like this
.hero-section {
// ie. height/width can be anything you like
height: 20rem;
width: 40rem;
...
}
then set the object-fit property to cover in the .image class
.image {
...
object-fit: cover
}
resolution 2
use the image as a background image. Take out the .img class and the image markup entirely from HTML. Set the .hero-section css like this
.hero-section {
...
width: 40rem;
height: 20rem;
background-size: cover;
background-position: center;
background-image: url("/images/original.png");
...
}
I have a mock of the code in my codesandbox below

Background Image Display in Viewport [duplicate]

I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.
Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course
link: g-floors.eu
Code I have so far (content part)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}

If you want the same image to scale based on the size of the browser window:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Do not set width, height, or margins.
EDIT:
The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

Try this :
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

CSS:
background-size: 100%;
That should do the trick! :)

Here is sass mixin for responsive background image that I use. It works for any block element. Of course the same can work in plain CSS you will just have to calculate padding manually.
#mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
#include responsive-bg-image(204, 81);
}
Example http://jsfiddle.net/XbEdW/1/

This is an easy one =)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Take a look at the jsFiddle demo

Here is the best way i got.
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
Check on the w3schools
More Available options
background-size: auto|length|cover|contain|initial|inherit;

#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}

I used
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
which worked really well.

Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
More complicated method:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

You can use this. I have tested and its working 100% correct:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
You can test your website with responsiveness at this Screen Size Simulator:
http://www.infobyip.com/testwebsiteresolution.php
Clear Your cache each time you make changes and i would prefer to use Firefox to test it.
If you want to use an Image form other site/URL and not like:
background-image:url('../images/bg.png');
//This structure is to use the image from your own hosted server.
Then use like this:
background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Enjoy :)

<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#res_img {
background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 1px solid red;
}
#media screen and (min-width:300px) and (max-width:500px) {
#res_img {
width: 100%;
height: 200px;
}
}
</style>
<div id="res_img">
</div>

If you want the entire image to show irrespective of the aspect ratio, then try this:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
This will show the entire image no matter what the screen size.

background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
or
background-size:100%;

Just two lines of code, it works.
#content {
background-image: url('../images/bg.png');
background-size: cover;
}

Adaptive for square ratio with jQuery
var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;
if(HW<1){
$(".background").css("background-size","auto 100%");
}
else if(HW>1){
$(".background").css("background-size","100% auto");
}

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;
the position property can be used to align top bottom and center as per your need and background-size can be used for center crop(cover) or full image(contain or 100%)

I think, the best way to do it is this:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
In this way there's no need to do nothing more and it's quite simple.
At least, it works for me.
I hope it helps.

Try using background-size but using TWO ARGUMENTS One for the width and the other one for the height
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width
// and the second will be the height.
background-position:center;

Not able to add background image for a particular DIV in HTML

I have a webpage like the following:
I am trying to add a small background image in the marked section below:
I tried the following code for the DIV
.king {
background-image: url(../img/banner-lg.jpg);
}
<div class="king">
</div>
But the background image is not coming into display, can anyone help me with this.

try to write like this:-
.hero-image {
background-image: url("/images/photographer.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

As you can see in my snippet if you set some width and height static to the div, the image is showed up.
Be sure that your div has height so he can show your image.
Be sure that the image url() is corrected, did you try to show an external image like http://via.placeholder.com/200x200
.king {
background-image: url("http://via.placeholder.com/200x200");
/*If you comment background-repeat the image will be repeated*/
background-repeat: no-repeat;
width: 500px;
height: 500px;
/*if you comment width and height you just see a grey line taken by <p> tag
if you comment the <p> you don't see nothing*/
}
<div class="king">
<p> Some text Here </p>
</div>
Some good resources:
https://www.w3schools.com/cssref/pr_background-image.asp
https://developer.mozilla.org/it/docs/Web/CSS/background-image
PS: I see in the resources that the form is url('the_path_image')... did you try with '' ?
EDIT
Add an example with no repeated image.
Now the container div is 500x500 and image is 200x200.
If we comment the background-repeat: no-repeat; the image will be repeated for the full div area

You can use below code to set background image.
.king {
background-image: url('../img/banner-lg.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}

How to scale an image to cover entire parent div? [duplicate]

This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 4 years ago.
http://jsfiddle.net/Log82brL/15/
This <img> isn't shrink wrapping as I would expect with min-width:100%
I'm trying to shrink the <img> until either height or width matches the container
Click anywhere in the <iframe> to toggle container shapes
Please try to edit the <img> CSS:
MAINTAIN ASPECT RATIO
COVER ENTIRE SURFACE AREA OF CONTAINER DIV
ONLY EDIT THE IMAGE
My question is specifically: scale an <img> to maintain aspect ratio but cover the entire surface of parent <div> even as the parent <div> resizes.
Maybe I could somehow use css flex box-layout or something? Maybe a transform?

http://jsfiddle.net/Log82brL/7/
#img {
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit: cover allows the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

If you don't want to touch the container, put the background on the <img>
#img {
background: url(imgpath) no-repeat center;
background-size: cover;
}
You can set HTML source to a transparent base64 pixel (credit CSS Tricks)
<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
http://jsfiddle.net/Log82brL/17/

Did u try the bootstrap solution
http://getbootstrap.com/css/#images-responsive
which is pretty much
.img-responsive
{
max-width: 100%;
height: auto;
display: block;
}
Adding to your update question
http://jsfiddle.net/arunzo/Log82brL/5/
.skinny>img
{
max-width:none !important;
min-height:none !important;
max-height:100%;
-webkit-transform:translate3d(+50%, +50%, 0);
}
And still i am unsure what is that you seek, sorry for the jerky animation.

You can use CSS background instead of HTML img.
.myDiv
{
height: 400px;
width: 300px;
background-image: url('image-url.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
border: 1px solid #000000;
}
<div class="myDiv">
</div>
Here is the JS Fiddle Demo.
Try to change height and width - you will see that image stretches to fill the div.
You can also different background-size values:
Proportional stretch to contain: background-size: contain;
Too tall div
Too wide div
Proportional stretch to fill: background-size: cover;
Too tall div
Too wide div
Stretch to fill 100%: background-size: 100% 100%;
Too tall div
Too wide div

use single css background shorthand property
.myDiv
{
height: 400px;/*whatever you want*/
width: 300px;/*whatever you want*/
background: url('image-url.png') no-repeat center center;
background-size: contain;
}
<div class="myDiv">
</div>

Updated answer. Now works as intended.
var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
#container {
overflow: hidden;
width: 400px;
height: 200px;
transition: all .5s;
margin: 0 auto; /* this is just for demonstration purposes */
}
#container.skinny {
width: 200px;
height:600px;
}
#img {
height: auto;
left: 50%;
margin: auto;
min-height: 100%;
position: relative;
top: 50%;
transform: translate(-50%, -50%); /* changed to 2d translate */
width: 100%; /* full width in wide mode */
}
#container.skinny #img {
width: auto; /* width reset in tall mode */
}
<div id="container">
<img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>

http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div
contained AND centered
I think this is the rendering you're trying to get, this might help ;)
https://jsfiddle.net/erq1otL4/
<div id="container" style="background-image: url(http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg);"></div>
#container.skinny {
width: 400px;
height:600px;
}
#container {
width: 400px;
height: 200px;
overflow: hidden;
background-size: cover;
background-color:pink;
background-position: center center;
}
var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");

A while back I found a jQuery solution called "backstretch". Now this looks possible with CSS3:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}

Usually to achieve that you need to use:
parentdiv img {
width:100%;
height:auto;}
in order to make your image resize with the parent div.
This can cause some cropping issues (visually) if you set the overflow to hidden.

Try this:
<div class="img_container">
<img src="image/yourimage.jpg" alt="" />
</div>
<style type="text/css">
.img_container{
width: 400px;
height: 400px;
overflow: hidden;
}
.img_container img{
width: 100%;
height: auto;
}
</style>
setting the height or the with auto will not make the image look stretched.

Use this class of Bootstrap .img-responsive and if parent div changes add media Queries to image and div both

Here is a very simple CSS solution that does not require changing the attributes of an img tag.
div{
background-image: url("http://www.frikipedia.es/images/thumb/d/d5/Asdsa-asdas.jpg/300px-Asdsa-asdas.jpg");
height: auto;
width: 400px;
overflow: hidden;
background-size: cover;
background-position: center;
}

Make image fill div completely without stretching

I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one dimension:
http://jsfiddle.net/HsE6H/
HTML
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
The proportions should stay the same. Essentially, wide images should be cut off in width, while high images need to be cut off in height. So just zooming in as much as is needed to fill the container.
Not sure why I can't get it to work, do I need JavaScript for this?
Edit: To be clear. I need everything red on the fiddle gone. The images coming in are dynamic, therefore I can't use background-images. I'm open to using JavaScript. Thanks! :)

Auto-sizing Images to Fit a Div - Making the CSS Work
Here is one way of doing it, start with the following HTML:
<div class="container portrait">
<h4>Portrait Style</h4>
<img src="http://placekitten.com/150/300">
</div>
and the CSS:
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
.container img {
display: block;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
and the demo fiddle: http://jsfiddle.net/audetwebdesign/QEpJH/
When you have an image oriented as a portrait, you need to scale the width to 100%. Conversely, when the image is landscape oriented, you need to scale the height.
Unfortunately, there is no combination of selectors in CSS that targets the aspect ratio of the image, so you can't use CSS to pick out the correct scaling.
In addition, you have no easy way of centering the image since the top left corner of the image is pinned to the top left corner of the containing block.
jQuery Helper
You can use the following jQuery action to determine which class to set based
on the aspect ratio of the image.
$(".container").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
$(this).addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
For each image in .container, get the height and width, test if width<height and then set the appropriate class.
Also, I added a check to take into account the aspect ratio of the containing block.
Before, I had implicitly assumed a square view panel.

For anyone looking to do this that doesn't have dynamic images, here's an all-CSS solution using background-image.
<div class="container"
style="background-image: url('http://placehold.it/300x1500');
background-size: cover; background-position: center;">
</div>
<div class="container"
style="background-image: url('http://placehold.it/1500x300');
background-size: cover; background-position: center;">
</div>
The "background-size: cover" makes it so that the image scales to cover all of the div while maintaining the aspect ratio. The CSS could also be moved to a CSS file. Although if it's dynamically generated, the background-image property will have to stay in the style attribute.

Taking out the line: max-width:100% in your CSS file seems to do the trick.
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
height: auto;
}
Also you can add > to your closing div in your HTML file could make the code neater.
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div>
Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/

Here is another solution I found, that no need to seperate portraid or landscape or scripting.
<div class="container">
<img src="http://placehold.it/500x500" class="pic" />
</div>
CSS
.container{
position: relative;
width: 500px;
height: 300px;
margin-top: 30px;
background: #4477bb;
}
.pic{
max-width: 100%;
width: auto;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here it is, it works well...
https://jsfiddle.net/efirat/17bopn2q/2/

Background can do this
set image as background
2.
div {
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
or
div {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

You should try this:
img {
min-width:100%;
min-height:100%;
}

I used this plugin that accounts for any ratio. It also requires imagesloaded plugin to work. This would be useful for numerous images across a site needing this treatment. Simple to initiate too.
https://github.com/johnpolacek/imagefill.js/

It works if you add the following to the parent div for img styling;
https://jsfiddle.net/yrrncees/10/
.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}

This could do the job:
.container {
float: left;
height: 300px;
width: 240px;
background-color: red;
margin: 20px;
}
img {
width:240px;
height:300px;
}

We went down the path with an Angular app of using a variation on the jQuery approach above. Then one of our bright colleagues came up with a pure CSS approach. See this example here: https://jsfiddle.net/jeffturner/yrrncees/1/.
Basically using line-height solved the problem for us. For those not wanting to hit the fiddle, the code fragments are:
.container {
margin: 10px;
width: 125px;
height: 125px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
The key is in using line-height and setting the container to do the same.

I came across this topic because I was trying to solve a similar problem. Then a lightbulb went off in my head and I couldn't believe it worked because it was so simple and so obvious.
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
min-width:100%;
min-height:100%;
}
Just set the min-width and min-height to 100% and it will always automatically resize to fit the div, cutting off the excess image. No muss no fuss.

Using an image as Div background has many disadvantages (like missing ALT for SEO). Instead of it, use object-fit: cover; in the image tag style!

The following solution is very short and clean if you need to insert img tag into div tag:
.container, .container img
{
max-height: 300px;
max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>
Also, if you don't need to use a div you can just write an even shorter css:
img
{
max-height: 300px;
max-width: 240px;
}