Develop Reference

object-fit:cover resizes img width

I'm trying to make a carousel slide, but when I'm using object-fit:cover and adding the second image the first and the second image width are changing from 100% to 50%
on 1 input it works fine
See photo here
on second input it's changing its width
See photo2 here

I think the object-fit:cover property can be set with the width property.
image {
width: 100%;
object-fit: cover;
}
Then the image places appropriately so that it's width is 100%.

If you really want img to be 100% in flex layout you can use one of these options:
img {
width: 100%;
flex-shrink: 0;
}
img {
min-width: 100%;
}
If smth else - update/improve your question

Images not resizing correctly in chrome full screen

this is my first post so excuse my lack of information and flow of things.
The images on this site that im working on are not resizing correctly in chrome; max window size. i see that the images dont want to stretch but they are far too big. I built the site in dreamweaver so it shows everything working fine on its end but in chrome its not correct.
html img 1
<section class="intro">
<img src="hglogo.jpg">
</section>
css img 1
.intro img {
width: 100%;
max-height: 100%;
}
html img 2
<section id="bio">
<ul class="img-list">
<li>
<img src="img/bg4.jpg"/>
<span class="text-content"><span><h2>Who Is Henry?</h2>
...
css img 2
#bio img {
width: 100%;
max-height: 100%;
}
I would appreciate any help thanks

instead of this:
#bio img {
width: 100%;
max-height: 100%;
}
change to this:
#bio img {
max-width: 100%;
height:auto;
}

That's because of the max-heigth: 100%. Putting this will make your image stop scaling when it's at 100% of his height-size. Replace it by height: auto or simply remove it in order to make it work.

Div Square, width size based on 100% height

I'm trying to make a responsive square with the width size based on the (100%) height of the element. I believe it's impossible using only CSS.
The square width should be equal to the height (100% of the large container. The large container is more than 100% of the screen). The ratio has to be width=height to keep the square.

You could do this with a tiny inline image.
No JS, no extra files.
.container {
height: 150px;
width: 100%;
text-align: center;
background: #acd;
}
.square {
display: inline-block;
height: 100%;
background: #691;
}
<div class="container">
<div class="square">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="100%">
</div>
</div>

For a CSS-only solution (where you're sizing relative to the screen size), use viewport units. For example:
#media screen and (orientation:landscape) {
.box{
height: 100vh;
width: 100vh;
}
}
#media screen and (orientation:portrait) {
.box{
height: 100vw;
width: 100vw;
}
}
(You may want to reduce it to 98 units to eliminate scrolling)
Works great for divs that need to take up a precise proportion of screen space.
JSFiddle here.

Take a look... at the aspect-ratio property.
This property makes creating a square div based on height, in the easiest method possible. Here's some example code:
h2 {
font-family: calibri;
}
#parent {
height: 96px;
width: 256px;
background: grey;
margin-bottom: 16px;
}
#child {
height: 80px;
aspect-ratio: 1 / 1;
background: lightgrey;
}
#anotherParent {
height: 96px;
width: 256px;
background: grey;
}
#anotherChild {
height: 50%;
aspect-ratio: 1 / 1;
background: lightgrey;
}
<h2>Absolute height (80px/96px)</h2>
<div id="parent">
<div id="child">
</div>
</div>
<h2>Relative height (50%)</h2>
<div id="anotherParent">
<div id="anotherChild">
</div>
</div>
Here are a couple of links to help you understand the aspect-ratio property:
https://css-tricks.com/almanac/properties/a/aspect-ratio/
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
https://support.squarespace.com/hc/en-us/articles/115008538927

Since a square has same width and the height, and you know the width of the square, you can apply the same value to height.
If you can use JS, then please try this: (jQuery)
var wiDth = $('div').css('width'); // get width
$('div').css('height', wiDth); // apply that value to the height
Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/vpGUK/

You can accomplish this using javascript. I'm assuming that you have a larger div container, in which you want a square, whose height is the same height as the container. The html is as follows:
<div id="container">
<div id="square" style="height:100%;">
</div>
</div>
In javascript, you would simply do:
<script>
var container = document.getElementById("container");
var square = document.getElementById("square");
square.style.width = container.style.height;
window.onresize=function(){
square.style.width = container.style.height;
};
<script>
Hope that helps

I think this can be a good 'css only' solution for you.
Cross browser working.
http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares
Good to highlight this nice css rule:
If the vertical paddings (and margins) are specified in percent (%) values the size is a percent of the width of the containing element.

Put it on your <script src="http://code.jquery.com/jquery-1.10.2.js"></script> and try with jquery:
var totalHeight = 0;
$("#yourContainer").children().each(function(){
totalHeight += $(this).height;
});
$("#yourContainer").css('width', totalHeight + 'px');

Ok here the solution.
<div id="square" style="background-color:black;height:100%">test</div>
$(window).ready(updateWidth);
$(window).resize(updateWidth);
function updateWidth()
{
var square = $('#square');
var size = square.height();
square.css('width',size);
}
http://jsfiddle.net/j372H/7/

You can assign width and height to the container like this
.container {
width: 100vh;
height: 100vh;
}
It will create a square div with 100% height and width=height.

Resizing Images As Window is Resized?

Currently I have four images side by side. When the window is resized or viewed on a smaller device it does a line jump (three images and the fourth one beneath it). However what I want is for all four images to just shrink relative to the window size. To make it clear, I've included some images and my code. Here's the jsfiddle as well: http://jsfiddle.net/hxeJb/
^ That is what I currently have.
^ That is what I want to achieve.
HTML:
<div id="headerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>
CSS:
#headerline {
width: 100%;
overflow: hidden;
margin: -10px auto 20px auto;
}
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}

http://jsfiddle.net/hxeJb/2/
#menu img {
width: 20%;
}
See if this help you, just don't provide a fixed width, let image width relative to its parent width

Observing your CSS part in jsFiddle, I think assigning width in percentage rather than fixed pixels will resolve your problem.
You can try this instead of current CSS.
#menu img {
width: 31.33%;
}
Hope this might help you.

The other answers are probably all correct but you may want to add a max-width: 150px; so that hte image does not expand too big and lose quality.
#menu img {
width: 30%;
max-width: 150px;
}
Fiddle: http://jsfiddle.net/hxeJb/4/

Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
#menu img {
width: 25%; //give the width as per the requirement
}
Hope this will solve your problem :)

Set image max size

I need to set maximum height and width of a image in <img> tag. For example say max size is 400x400 px so if the image size is smaller than this then it will show the image as it is and if size is bigger then this then it should be compressed to this size. How can I do this in html or javascript?

Set the max-width and max-height in CSS
max-width: 400px;
max-height: 400px;

You can also use object-fit: scale-down to make image fit a container size if it's too big and leave image size as is if it's smaller than the container.
CSS:
.img-scale-down {
width: 100%;
height: 100%;
object-fit: scale-down;
overflow: hidden;
}
HTML:
<div style="width: 400px;">
<img src="myimage.jpg" class="img-scale-down"/>
</div>

try using a div tag of that size and putting image inside:
<div style="width:400px; height400px;>
<img style="text-align:center; vertical-align:middle; max-width:400px; max-height:400px;" />
</div>
or something like that. The div is the full size and the image can only expand to its borders.

The way I did it:
When the image is being uploaded I use a server side library to resize if the image is bigger (only). You always resize down, never up.
Then on the client side I do not set the image size.
The image will be 400x400 only for those images that were exactly that size or bigger.

In JavaScript you can use:
/* getting the image */
var img = document.createElement('img');
img.src = "img.png";
/* setting max width and height */
document.getElementById("id").appendChild(img).style.maxWidth = "400px";
document.getElementById("id").appendChild(img).style.maxHeight = "400px";
/* inserting image */
document.getElementById("id").appendChild(img);

img
{
max-width: 400px;
max-height: 400px;
}
Like so: http://jsfiddle.net/fMuVw/