I'm trying to centre an image, i've attached a jsfiddle to show the outcome of what I want, the only difference would be that the image is placed into the html and not the css code.
http://jsfiddle.net/6y2qjxm0/3/
Here's the css I'm using in the fiddle and i've already taken the image url out.
width:100%;
height:100%;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
and finally here's the html:
<div class="full-screen">
<img src="http://placehold.it/350x150">
</div>
Failing this, does anyone know a better way of doing this?
It must be centred and it must be 100% width and 100% height.
Thanks
UPDATE: The image must stay in proportion like the fiddle.
UPDATED This solution is independent of the image dimensions, apart from that it needs its with to be greater than its height. It uses CSS positioning to set the image within .full-screen to be of full height, keep proportions and with a 50% negative horizontal offset (centered).
HTML:
<div class="full-screen">
<img src="http://placehold.it/350x150" />
</div>
CSS:
body, html {
margin: 0;
height: 100%;
overflow-x: hidden;
}
.full-screen {
position: relative;
height: 100%;
}
.full-screen img {
position: absolute;
left: 0;
height: 100%;
left: -50%;
}
Updated fiddle: http://jsfiddle.net/5e6btwa2/1/
background-size: cover; is your best bet, with support from ie9+. Getting an img to cover the page without distorting only works if you know its size or are willing to use javascript.
Why do you need to use an img? Is it because you want the src to be added dynamically? in that case you should use an inline style.
<div style="background-image:{{dynamicImage}}"></div>
Try use attribute align with value middle in your img tag
<img src="smth.gif" align="middle">
If you want the same behavior as you had with the image as a background, you could do it like this (depends on the CSS3 transform method):
http://jsfiddle.net/6y2qjxm0/6/
HTML
<div class="full-screen">
<img src="http://placehold.it/350x150">
</div>
CSS
* {
margin:0;
padding:0;
position: relative;
}
html {
width: 100%;
height: 100%;
background-size: cover;
position: relative;
overflow-y: scroll;
}
body {
width: 100%;
height: 100%;
margin-left:auto;
margin-right:auto;
background: inherit;
/* overflow: hidden; enable to disable scrolling */
}
.full-screen {
width:100%;
height:100%;
overflow: hidden;
}
.full-screen img {
min-width: 100%;
min-height: 100%;
left: 50%;
transform: translate(-50%,0);
}
Try this, it works in IE8+ and pretty much every other browser:
HTML
<div class="full-screen">
<img src="http://placehold.it/350x150" />
</div>
CSS
.full-screen {
position: fixed;
top: -50%; /* this will center the image vertically */
left: -50%; /* this will center the image horizontally*/
width: 200%;
height: 200%;
}
.full-screen img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Demo
For other ways have a look at this article on CSS tricks by Chris Coyier. The CSS above is used in Technique #2 in his examples.
Related
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;
}
Some of my content seems to be pushed below a jQuery plugin I am using called ParticleGround, found here: ParticleGround GitHub
I have this code here:
<script type="text/javascript">
window.onload = function(){
$('#Home').particleground({
dotColor: '#95a5a6',
lineColor: '#95a5a6'
});
}
</script>
<div class="Home" id="Home">
<div class="text-vcenter">
<p class="home">Test</p>
<p style="color:white; font-family:BebasNeueLight; font-size: 2em;">Cool stuff here</p>
<p style="color:white;">Info</p>
<p style="color:white;">Texas, USA</p>
<br />
<a class="btn btn-info outline smoothScroll" href="#Services">More Info</a>
</div>
</div>
Of course all my plugins are properly initialized so that is not the issue.
As you can see in the code above, I have the background as the #Home id which is initialized in the particleground script to use the effect. Now, this all started happening when I changed this line of code:
<div class="centered">
to...
<div class="text-vcenter">
Here is the CSS to:
#Home:
#Home {
background: #16a085 no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-right: 25px;
padding-left: 25px;
}
.centered:
.centered {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
text-align: center;
}
.text-vcenter:
.text-vcenter {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Any ideas on how to fix my content being pushed below the particleground? I'm certain it's an easy fix but I'm coming up blank, it's late at night for me.
UPDATE:
It seems to have actually just pushed it down below the 100% view for the particleground and moved it over to the right, where it should be in the center on top of the particleground div.
Well, the canvas has a display: block on it, so it's pushing the content down. You could set the canvas to be absolutely positioned:
canvas{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
This way it will be 100% width and height of the #Home div, but since it's absolutely positioned, it would be in the background.
Here's the fiddle: http://jsfiddle.net/4h0ghb67/
Hi guys I was trying to swap the background of two images down the footer section of my website using skrollr.js (https://github.com/Prinzhorn/skrollr). For some reason it won't scroll at all. I am trying to create a parallax site that has fixed position on the part below.
See image: http://prntscr.com/6yrckx
Here's the Markup of that part:
<div id="starynight"
data-bottom-top="opacity: 1; background: !url(images/sunny.jpg); background-size: cover;"
data--40-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--50-top="opacity: 0; background: !url(images/night.jpg); background-size: cover;"
data--60-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--70-top="opacity: 1; background: !url(images/night.jpg); background-size: cover;"
>
</div>
While here's the CSS:
#starynight{
background: url('../images/sunny.jpg') no-repeat center;
width: 100%;
height: 307px;
background-size: cover;
}
#road{
background: url('../images/road.jpg') no-repeat center;
width: 100%;
height: 145px;
background-size:cover;
}
#car{
background: url('../images/car.png') no-repeat center;
width: 325px;
height: 125px;
display: block;
position: absolute;
z-index: 9999;
left: 950px;
top: 2100px;
}
My issue here is that when I scroll this part of my website it should swap the images of the sunny.jpg and night.jpg while the car is moving from right to left and also this background image must be fixed in position. For some reason my codes won't just work. Any idea what went wrong?
See my website here: http://goo.gl/aNOCiJ
Animating backgrounds is not like animating positions or "number" data. You can't just transform one background into another by fading them (actually Firefox somehow can animate the transition, but lets not depend on that).
A solution to your problem is having 2 diferent divs for, 1 for your night scene, and other for your sunny sky just in the same position, one over the other and with the sunny one with a higher z-index.
Then what you need to animate on scroll is the opacity of the sunny sky, what makes the night scene appear.
Also I found that your level of scroll isn't enough to fade the opacity of the sunny sky completly, it ends in 0.603448.
Hope it helps, please tell me if this worked.
As stated already, background images can't be animated, only background colors. So you'll have to lay both images on top of each other and fade the top layer in like this -
*Untested
#starynight-wrap {
position: relative;
width: 100%; height: 307px;
}
#starynight-day {
position: relative;
width: 100%; height: 100%;
background: url('images/sunny.jpg');
background-size: cover;
}
#starynight-night {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: url('images/night.jpg');
background-size: cover;
}
<div id="starynight-wrap">
<div id="starynight-day"></div>
<div id="starynight-night"
data-bottom-top="opacity: 0"
data--50-top="opacity: 0;"
data--60-top="opacity: 0.5;"
data--70-top="opacity: 1;"
>
</div>
</div>
I'm looking for a way to darken all of the area within a container except for a transparent child div. This div is draggable, so the dimmed area would have to move with it. Does anyone know of a way to achieve this using jQuery/CSS? Here is a picture of the effect I am trying to achieve:
EDIT: SOLVED
See #Robby Cornelissen's answer
Could do something like this fiddle. It relies on an absolutely positioned viewport element with a fixed background. If you click the viewport element, you'll see that it moves while the background stays fixed.
HTML
<div class="back">
<div class="overlay">
<div class="front">
</div>
</div>
</div>
CSS
.back, .front {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Swallow_flying_drinking.jpg/1024px-Swallow_flying_drinking.jpg");
background-attachment: fixed;
background-position: 0,0;
}
.back {
width: 1024px;
height: 623px;
}
.front {
position: absolute;
left: 200px;
top: 50px;
width: 300px;
height: 150px;
z-index: 100;
}
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
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;
}