Develop Reference

How to fix the website view not above 1440px

My current website is this https://resillience.in
It is completely responsive below 1440px and works fine
But it looks wierd when viewed at 2560px as shown below
Don't want to change the things also in % to make it responsive at 2560px
How to fix the view at 1440px and have a work around like shown below
If viewed at higher, it adds padding from both sides.
Also adding max-width:1440px in the main html css file, I cannot achieve the desired result
The following code also might not solve
#root {
max-width: 1400px;
margin: 0 auto;
}
Because some of the images are having its css property as
position: fixed;
right: 0;

In general,you can apply this CSS to your #root element:
#root {
max-width: 1400px;
margin: 0 auto;
}
This will limit the overall width at 1400px and center it horizontally when the window is wider than 1400px.
I don't know if there are any details in other pages of your website which would cause a problem in conjunction with those settings (I don't see any at first sight), but this would be an easy, general procedure to get what you are asking for.

add justify-content: flex-end; to right side menu and I had changed some CSS to look beautiful. Please go through this.
.jss6 {
justify-content: flex-end;
}
.jss7, .jss18 {
margin: 0 10px; /* to add space between a tag and dropdown */
}
.active {
border: none;
}
.active::before {
position: absolute;
height: 6px;
width: 100%;
background: #3672c0;
content: '';
left: 0;
bottom: -3px;
}

try do the following:
#root {
width: 100%;
}
#media (min-width: 1440px) {
#root {
width: 1440px;
margin: 0 auto; // for centering
}
}
setting the width to fixed-size might solve the issue, from my quick review, why? cuz u probably used width: 100% inside the root div, so setting the root div to fixed-size always be related to that 100% = 1440px; :) let me know

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

How to get unknown style rule in MS Edge with JavaScript

I want to use object-fit CSS rule.
This is not supported in MSIE and MS Edge Browser.
While there are some polyfills for IE, there is none to my knowledge that works in Edge.
E.g. the polyfill fitie by Jonathan Neal works with IE, but not in Edge (at least not on my machine). This is because fitie uses element.currentStyle and element.runtimeStyle which are MS only JS objects which do not any support in Edge browsers anymore. But if I use window.getComputedStyle(element).getPropertyValue('object-fit'), Edge returns nothing.
So how do I obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser?
img = document.getElementById('i');
s = self.getComputedStyle(img);
console.log('object-fit: ', s.getPropertyValue('object-fit'));
console.log('-ms-object-fit: ', s.getPropertyValue('-ms-object-fit'));
div {
width: 400px;
height: 320px;
overflow: hidden;
}
#i {
display: block;
width: 100%;
height: 100%;
-ms-object-fit: cover;
object-fit: cover;
}
div {
box-sizing: border-box;
border: 1px solid gold;
}
div,
p {
font-family: sans-serif;
font-size: 20px;
width: 400px;
margin: 0 auto;
}
<p>img: Has object-fit CSS rule, but does not appear in MS Edge JavaScript log</p>
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
Edit
It must be possible somehow, as it is not fully ignored.
The Developer Tools show the rule curly underlined
Bonus question:
Is there any polyfill for object-fit that works in Edge?

You should be able reference it directly:
// 'Fill' in Chrome and undefined in Edge
console.log('object-fit',
window.getComputedStyle(document.querySelector('.test')).objectFit);
// 'rgb(255,0,0)' in both
console.log('color',
window.getComputedStyle(document.querySelector('.test')).color);
.test{ color: red; }
<div class="test">test</div>
That style property will be undefined in browsers that don't support it (like Edge) even with a polyfill.
The problem is that, as far as Edge is concerned: there is no object-fit rule. When Edge parses the CSS it fails to recognise the rule and just skips it. If you shim the behavior with other properties or JS that doesn't change the fact that Edge just doesn't know about it.
So, in answer specifically to "So how do I obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser?" you can do window.getComputedStyle(ele).objectFit to get the value, and it's always undefined (even if successfully shimmed).
For the bonus question: background-size: cover is supported by Edge, so you should be able to set the image as a CSS background to a display:inline-block element and get the behaviour that you want. You can swap out the <img> for a styled <div> fairly easily...
var img = document.querySelector('.i');
// If object-fit missing
if (!window.getComputedStyle(img).objectFit) {
// Create a div
var div = document.createElement('div');
div.className = img.className;
// Set the background image to be the source
div.style.backgroundImage = 'url(' + img.src + ')';
// Set background-size to the object-fit we want
div.style.backgroundSize = 'cover';
// Swap them
img.parentNode.replaceChild(div, img);
}
.test {
width: 400px;
height: 320px;
overflow: hidden;
border: 1px solid red;
}
.i {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="test">
<img src="https://dummyimage.com/640x240/333/444.png" class="i" /></div>
That's just the basic idea - a shim like object-fit-images takes this idea a lot further and supports additional properties like object-position.
Alternatively (and with a lot more HTML) you can keep the <img> tag and wrap it in a container that behaves like it's applying object-fit relative to it. This is what object-fit-polyfill has done.
Both shims should work in Edge.

I want to use object-fit CSS rule.
You don't need to obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser to be able to make an img cover its parent.
Bonus: No need to use a polyfill and works across all browsers down to IE9
Side note, MS Edge ver. 16 supports object-fit
Here is a solution that works exactly as object-fit: cover, making use of transform: translate and min-width/height.
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
If you want you can use CSS #supports to also reset the above properties and add object-fit.
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#supports (object-fit: cover) {
#i {
min-width: auto;
min-height: auto;
top: auto;
left: auto;
transform: none;
width: 100%;
height: 100%;
object-fit: cover;
}
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
Another overlooked option when one need to use an img because one want to set the image source in the markup, is to use a inline style for the background-image source.
Given the fact, in this case, where a div with fixed width/height sets the boundaries for the image, here is a simple sample of that.
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
background-position: center;
background-size: cover;
}
<div style="background-image: url(https://dummyimage.com/640x240/333/444.png)">
</div>
Updated
You can of course mimic object-fit: contain as well
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
max-width: 100%; /* changed to max */
max-height: 100%; /* changed to max */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
Updated based on a comment
When it comes to mimic object-fit for video things gets much more complicated.
The video element doesn't respond in the same way an image does.
Here is 4 different samples showing that some video work when mimic cover and some when mimic contain
https://jsfiddle.net/zvtx6uy7/2/ cover with a more square video
https://jsfiddle.net/zvtx6uy7/3/ cover with a more wide video
https://jsfiddle.net/zvtx6uy7/5/ contain with a more square video
https://jsfiddle.net/zvtx6uy7/6/ contain with a more wide video
To achieve a consistent and the same good result as with the image, one need to run a small script to get the video aspect ratio, and then set its width or height to 100% based on its and its container aspect ratio.
Here is another post at SO, simulate background-size:cover on <video> or <img>, which show some more approaches how one can go about this.
One other option I found is to use media query and its max/min-aspect-ratio
Fiddle demo
Src: https://fvsch.com/code/video-background/

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;
}

Preview and zoom image like Firefox

When you open an image in Firefox, it has the following characteristics:
Displayed centered in the browser.
Will have a height/width contained (does not exceed browser dimensions).
Does not resize larger than its max size.
Does not resize at all if its smaller than the browser window.
Retains aspect ratio.
Has a zoom tool which resizes the image to its max size and allows it to exceed browser dimensions.
How would I replicate this using CSS/JS? I've tried several different methods using CSS but I'm assuming it requires JS and I can't find any examples.
The best results I've achieved using contain:
height: 100%;
width: 100%;
background-url: {location of image}
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
But this only produces nice results with larger images, as it stretches smaller images to the match the browser height or width whereby instead I want images smaller than the browser to just be centered and retain their max height/width.

jsBin demo
(Disclaimer: Modern browsers only: (IE9+))
all you need is:
<div id="parent">
<img src="image.jpg">
</div>
CSS:
html,
body{
margin:0;
height:100%;
background:url(http://i.imgur.com/aSqDLP0.png);
}
body{ /* or use a wrapper element instead */
display: table;
width: 100%;
text-align: center;
}
#parent{
display: table-cell;
vertical-align: middle;
}
#parent img{
vertical-align: middle;
max-height: 100vh;
max-width: 100vw;
box-shadow: 0 4px 15px #111;
}
The above is enough for the centering and resize stuff.
If you want to additionally do exactly like Firefox does:
zoom-in cursor on hover - if image is resized by the browser (small)
scroll the window to the clicked coordinates - if image is small
zoom-out cursor - if image is zoomed (clicked) - show the -
than a bit of jQuery might come handy:
var $parent = $("#parent"),
isParentSmaller = false,
zoom = false,
parW, parH,
imgW, imgH;
$parent.find("img").on("mouseenter click", function( e ){
imgW = this.naturalWidth;
imgH = this.naturalHeight;
parW = $parent.width();
parH = $parent.height();
isParentSmaller = parW-1 < imgW || parH-1 < imgH;
$(this).css({
cursor: isParentSmaller ? (zoom?"zoom-out":"zoom-in") : "auto"
});
if(e.type=="click" && isParentSmaller){
zoom = !zoom; // Toggle zoom boolean
$(this).css({ // Apply cursor styles
maxWidth : zoom ? "none" : "100vw",
maxHeight : zoom ? "none" : "100vh",
cursor : zoom ? "zoom-out":"zoom-in"
});
// Scroll window where we want to zoom:
window.scrollTo(((imgW/parW)-1)*e.clientX, ((imgH/parH)-1)*e.clientY);
}
});
Modesty time, the above performs even better than Firefox, since Firefox looses the Magnifying glass cursor if you resize the window :)

Note: I re-wrote my answer because my previous solution wouldn't work in Firefox (oh, the irony). Also it caused strange behaviours in other browsers. Reason was flexbox to center the image both vertically and horizontally.
Let's do this step by step.
For keeping the aspect ratio of an image while setting maximum dimensions can be achieved with this:
.img {
display: block; // could also be inline-block or other block-like types
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
Now, centering an element both vertically and horizontally are technically 3 lines of code with flexbox. As mentioned above, this caused strange behaviours when scaling the images in some browsers. Instead we use text-align: center to center the image along the x-axis and a method with something called a "Ghost Element" to center the image along the y-axis. You can learn more about it in this article from CSS Tricks. In summary, we have this to center the element:
.parent {
text-align: center;
white-space: nowrap;
}
.parent:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.centered-child {
display: inline-block;
vertical-align: middle;
}
At last, we combine the scaling and centering. I assume the HTML only exists of a single <img class="img" ...> in the body.
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
text-align: center;
}
body:before {
content: '';
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
margin-left: -0.25em;
}
.img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
}
Now we implement the zooming
In order to zoom the image we need JavaScript. Let's use jQuery.
It's not nice to change css attributes in JavaScript, so we prepare two extra classes.
.img.is-zoomable {
cursor: zoom-in;
}
.img.is-zoomed {
cursor: zoom-out;
max-height: none;
max-width: none;
}
On click JavaScript will toggle the class is-zoomed and on mouseenter we decide if the image can be zoomed. If it can be zoomed, we add the class is-zoomable.
$('.img').on('click', function() {
$(this).toggleClass('is-zoomed');
});
$('.img').on('mouseenter', function() {
var origWidth = this.naturalWidth;
var origHeight = this.naturalHeight;
var currWidth = $(this).width();
var currHeight = $(this).height();
if (origWidth !== currWidth || origHeight !== currHeight) {
$(this).addClass('is-zoomable');
}
});
Et voilà, we're done. See my codepen for a working example.