I have a slider on a homepage I am currently working on. I am trying to achieve a full viewport height that takes up the whole width for the screen.
The only way I can currently achieve this is by either stretching the image, or the image isn't centred.
The image needs to be aligned roughly centred horizontally and vertically, so customers can see the centre of the image on any width of browser, and without stretching the image out of proportion.
I have tried the background-size: cover; on the element with no success as its not a background img. the containers have 100vh currently, but the width is the issue.
The issue is located here http://joeybox.info/ . I realise with the menu and the logo above the image the 100 viewport height will rest under the "fold", however I am placing the logo and menu over the image eventually, once I have figured out the css.
I have tried many solutions found within the stack overflow forum and none work in my scenario.
My current css, after deleting the in-correct code, is:-
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
.ewic-wid-imgs {height: 100vh;
max-width: unset;
width: unset;}
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
html=
<div class="slider-box">
<div id="ewic-con-385">
<div style="display: none;" id="preloader-385" class="sliderpreloader">
</div>
<div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">
<div style="width: 100%; overflow: hidden; position: relative; height: 633px;" class="bx-viewport">
<ul style="width: 315%; position: relative; left: 0px;" class="bxslider-385">
<li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span></div>
</li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span>
</div></li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg"><div class="ewic-caption">
<span>Qw Direct Leather Keyrings</span>
</div></li></ul></div>
<div class="bx-controls bx-has-controls-direction bx-has-controls-auto">
<div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a>
<a class="bx-next disabled" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div>
<div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div><br>
</div>
</div>
To achieve this you could add to your image inside .bx-wraper:
.bx-wrapper img {
display: inherit;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width: inherit;
}
now you need to set the parent li to relative:
.bx-wrapper ul li {
position:relative;
width:100%;
height:100%;
list-style: none !important;
margin: 0 !important;
}
and change your parent ul:
.bx-wrapper ul{
width:100%;
}
I have solved the above by changing my image slider. My new slider plugin (Envoke Supersized) uses a background image and was easier to use background-size:cover; css. Although after this full viewport height on mobile widths didn't look good with my images so I used 40vh on mobile widths.
I would recommend anyone trying to do the same to ensure your image is a background image, or replace the slider with a static background image for small browser widths.
I want to arrange the two pictures in a way that will always compose the word "Charleston" in the middle of the screen. I want this to be responsive to different screen resolutions. Can you help me with that?
<div id="leftHalf"></div>
<div id="rightHalf"></div>
#leftHalf {
background: url(/charback3.jpg);
width: 50%;
position: absolute;
top: 0px;
left: 400px;
bottom: 0px;
height: 100%;
background-repeat: no-repeat !important;
}
#rightHalf {
background: url(/charback4.jpg);
width: 50%;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
background-repeat: no-repeat !important;
}
View My Page
Here is one method, using display:inline to keep the two images on the same horizontal line. max-width:50% keeps the images at a maximum of 50% of their container's width without expanding beyond their native widths.
Note that using display:inline will preserve whitespace. So, remove the whitespace between your two <img> tags.
<div id="container">
<img src="/charback3.jpg" alt="" /><img src="/charback4.jpg" alt="" />
</div>
html, body {
margin:0;
}
div#container {
text-align:center;
}
div img {
display:inline;
max-width:50%;
}
WORKING EXAMPLE (jsfiddle)
I have a loop to loaded logo image in floated div block, I been tried few tips from stackoverflow but have no luck to make the logo align center and middle within the div, all logo height are not fixed and might have different height for each:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="left" src="images/logo/logo1.jpg">
</div>
Please help, thanks.
Use positioning. The following worked for me...
With zoom to the center of the image (image fills the div):
div{
float:left;
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Without zoom to the center of the image (image does not fill the div):
div{
float:left;
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
You really should move your CSS out of the style attribute and into a file like style.css if you have not done so. But if you really have to you can place the code below into inline styles like you have now.
Remove the align="left" attribute from your image tag and set the image's display to block. This will allow margin: 0 auto; to center your image for you inside the containing DIV.
Looks like you'll have to replicate a <table> with CSS to get the vertical centering you desire. Table cells allow vertical centering. To do this I've added and additional DIV with a class of .container. The .container DIV has it's display set to table and the .image-container DIV, which is acting like a table cell, has it's display set to table-cell.
CSS
.container {
float: left;
width: 80px;
height: 80px;
padding: 8px;
border: 1px solid #ccc;
display: table;
}
.image-container {
display: table-cell;
vertical-align: middle;
}
.image-container img {
display: block;
margin: 0 auto;
}
HTML
<div class="container">
<div class="image-container">
<img src="images/logo/logo1.jpg">
</div>
</div>
JSFiddle: http://jsfiddle.net/MJ5j4/
just create a class "centerImgWrapper", and wrap all your "center" Images anywhere in the Code with divs.
Thats pure CSS
.centerImgWrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;}
.centerImgWrapper img {
left: 0;
right:0;
top: 0;
bottom:0;
max-height: 100%;
max-width: 100%;
margin:auto;
position:absolute;
}
Just Check out the Fiddle.
MyFiddle
Dave
If you are trying to get it in the middle inside the div, have you tried:
<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
<img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">
</div>
I used "margin-left:50%; margin-top:50%;" INSIDE the IMG tag and got rid of the "align" and "float" attribute. I probably wouldn't want to use "align" in this case.
Either way, I hope it helps.
Images are more or less displayed as inline-blocks. So you can just set text-align: center; on the styles of the container div.
Getting something to be vertically aligned in the middle is complicated with css. If you're going to be dynamically placing the logo with JavaScript anyway, you can save yourself trouble and just center it vertically by specifying the margins with JavaScript.
Check out this demo: http://jsfiddle.net/jyvFN/1/
HTML
<div id="container">
<img id="logo" src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
float: left;
background-color: blue;
width: 200px;
height: 150px;
text-align: center;
border: 1px solid red;
}
JavaScript
var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottom = margin + "px";
Why didn't you set align of the image center?
Then your code should be:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="center" src="images/logo/logo1.jpg">
And I think it's also problem of the ratio of the image width vs the div block + it's padding and border.
Try to set it balance.
So I have a space for images of 120x120, it's for thumbnails, based specially in width.
It's a div that contains the image, that links to an article
I have an image of 120x57 but it stays at the top of the div, letting quite too much space from the text on the next div
<div class="thumb">
<img src="http://link.com/media/thumb.png" border="0" alt="thumb" title="thumb" class="thumblist">
</div>
The css for it:
margin: 8px 0;
width: auto;
height: 120px;
overflow: hidden;
I've tried with vertical-align:bottom, but no success, there is no other clean way to align it to the middle (or to the bottom at least of the ?
Regards
You can try this:
.thumb {
margin: 8px 0;
width: auto;
height: 120px;
overflow: hidden;
display:table-cell;
vertical-align:bottom;
}
I can think of a couple of ways, but none particularly elegant.
Setting the image in the background is the fastest, but the image can't be selected or printed (with default print settings). (Styles are inline for clarity.)
<a href="#" style="display: block; width: 120px; height: 120px;
background: url(thumb.jpg) bottom no-repeat;"></a>
Absolute positioning is a potent option, but it can have its issues.
<a href="#" style="display: block; width: 120px; height: 120px; position: relative;">
<img src="thumb.jpg" style="display: block; position: absolute; bottom: 0px; left: 0px; width: 120px;" /></a>
One of the simplest and surest ways is to just make a square image, padded as needed. It involves either manual work or additional script to prepare the images though.
Then there's table, but, well, it's table...
I'd go for the square image, if there's an image generator handy or there aren't too many thumbnails to adapt them in Photoshop myself. Failing that, background works just fine in most situations.
I need to make this image stretch to the maximum size possible without overflowing it's <div> or skewing the image.
I can't predict the aspect-ratio of the image, so there's no way to know whether to use:
<img src="url" style="width: 100%;">
or
<img src="url" style="height: 100%;">
I can't use both (i.e. style="width: 100%; height: 100%;") because that will stretch the image to fit the <div>.
The <div> has a size set by percentage of the screen, which is also unpredictable.
Update 2016:
Modern browser behave much better. All you should need to do is to set the image width to 100% (demo)
.container img {
width: 100%;
}
Since you don't know the aspect ratio, you'll have to use some scripting. Here is how I would do it with jQuery (demo):
CSS
.container {
width: 40%;
height: 40%;
background: #444;
margin: 0 auto;
}
.container img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.container img.tall {
max-height: 100%;
max-width: 100%;
width: auto;
}
HTML
<div class="container">
<img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
<img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>
Script
$(window).load(function(){
$('.container').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})
There is a much easier way to do this using only CSS and HTML:
HTML:
<div
class="fill"
style="background-image: url('path/to/image.jpg');">
</div>
CSS:
.fill {
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
This will place your image as the background, and stretch it to fit the div size without distortion.
Not a perfect solution, but this CSS might help. The zoom is what makes this code work, and the factor should theoretically be infinite to work ideally for small images - but 2, 4, or 8 works fine in most cases.
#myImage {
zoom: 2; //increase if you have very small images
display: block;
margin: auto;
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}
If you're able to set the image as a background-image then you can do something like this, which will crop the image without stretching it:
<div style="background-image: url(...); background-size: cover; width: 100%; height: 100%;"></div>
If you need to stick with an <img> tag, then as of 2019, you can now use the object-fit css property that accepts the following values:
fill | contain | cover | none | scale-down
See https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
As an example, you could have a container that holds an image:
<div class="container">
<img src="" class="container_img" />
</div>
.container {
height: 50px;
width: 50%;
}
.container_img {
height: 100%;
width: 100%;
object-fit: cover;
}
If you can, use background images and set background-size: cover. This will make the background cover the whole element.
CSS
div {
background-image: url(path/to/your/image.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
If you're stuck with using inline images there are a few options. First, there is
object-fit
This property acts on images, videos and other objects similar to background-size: cover.
CSS
img {
object-fit: cover;
}
Sadly, browser support is not that great with IE up to version 11 not supporting it at all. The next option uses jQuery
CSS + jQuery
HTML
<div>
<img src="image.png" class="cover-image">
</div>
CSS
div {
height: 8em;
width: 15em;
}
Custom jQuery plugin
(function ($) {
$.fn.coverImage = function(contain) {
this.each(function() {
var $this = $(this),
src = $this.get(0).src,
$wrapper = $this.parent();
if (contain) {
$wrapper.css({
'background': 'url(' + src + ') 50% 50%/contain no-repeat'
});
} else {
$wrapper.css({
'background': 'url(' + src + ') 50% 50%/cover no-repeat'
});
}
$this.remove();
});
return this;
};
})(jQuery);
Use the plugin like this
jQuery('.cover-image').coverImage();
It will take an image, set it as a background image on the image's wrapper element and remove the img tag from the document. Lastly you could use
Pure CSS
You might use this as a fallback. The image will scale up to cover it's container but it won't scale down.
CSS
div {
height: 8em;
width: 15em;
overflow: hidden;
}
div img {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
max-width: none;
max-height: none;
display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Hope this might help somebody, happy coding!
Thanks to CSS3
img
{
object-fit: contain;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
IE and EDGE as always outsiders:
http://caniuse.com/#feat=object-fit
That's impossible with just HTML and CSS, or at least wildly exotic and complicated. If you're willing to throw some javascript in, here's a solution using jQuery:
$(function() {
$(window).resize(function() {
var $i = $('img#image_to_resize');
var $c = $img.parent();
var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();
$i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
});
$(window).resize();
});
That will resize the image so that it will always fit inside the parent element, regardless of it's size. And as it's binded to the $(window).resize() event, when user resizes the window, the image will adjust.
This does not try to center the image in the container, that would be possible but I guess that's not what you're after.
You can use object-fit: cover; on the parent div.
https://css-tricks.com/almanac/properties/o/object-fit/
Set width and height of the outer container div. Then use below styling on img:
.container img{
width:100%;
height:auto;
max-height:100%;
}
This will help you to keep an aspect ratio of your img
If you want to set a max width or height (so that it will not be very large) while keeping the images aspect-ratio, you can do this:
img{
object-fit: contain;
max-height: 70px;
}
I came across this question searching for a simular problem. I'm making a webpage with responsive design and the width of elements placed on the page is set to a percent of the screen width. The height is set with a vw value.
Since I'm adding posts with PHP and a database backend, pure CSS was out of the question. I did however find the jQuery/javascript solution a bit troblesome, so I came up with a neat (so I think myself at least) solution.
HTML (or php)
div.imgfill {
float: left;
position: relative;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
width: 33.333%;
height: 18vw;
border: 1px solid black; /*frame of the image*/
margin: -1px;
}
<div class="imgfill" style="background-image:url(source/image.jpg);">
This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
This might be some info
</div>
By using style="" it's posible to have PHP update my page dynamically and the CSS-styling together with style="" will end up in a perfectly covered image, scaled to cover the dynamic div-tag.
To make this image stretch to the maximum size possible without overflowing it's or skewing the image.
Apply...
img {
object-fit: cover;
height: -webkit-fill-available;
}
styles to the image.
Using this method you can fill in your div with the image varying ratio of divs and images.
jQuery:
$(window).load(function(){
$('body').find(.fillme).each(function(){
var fillmeval = $(this).width()/$(this).height();
var imgval = $this.children('img').width()/$this.children('img').height();
var imgClass;
if(imgval > fillmeval){
imgClass = "stretchy";
}else{
imgClass = "stretchx";
}
$(this).children('img').addClass(imgClass);
});
});
HTML:
<div class="fillme">
<img src="../images/myimg.jpg" />
</div>
CSS:
.fillme{
overflow:hidden;
}
.fillme img.stretchx{
height:auto;
width:100%;
}
.fillme img.stretchy{
height:100%;
width:auto;
}
This did the trick for me
div img {
width: 100%;
min-height: 500px;
width: 100vw;
height: 100vh;
object-fit: cover;
}
if you working with IMG tag, it's easy.
I made this:
<style>
#pic{
height: 400px;
width: 400px;
}
#pic img{
height: 225px;
position: relative;
margin: 0 auto;
}
</style>
<div id="pic"><img src="images/menu.png"></div>
$(document).ready(function(){
$('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}
but i didn't find how to make it work with #pic { background:url(img/menu.png)}
Enyone?
Thanks
I had similar issue. I resolved it with just CSS.
Basically Object-fit: cover helps you achieve the task of maintaining the aspect ratio while positioning an image inside a div.
But the problem was Object-fit: cover was not working in IE and it was taking 100% width and 100% height and aspect ratio was distorted. In other words image zooming effect wasn't there which I was seeing in chrome.
The approach I took was to position the image inside the container with absolute and then place it right at the centre using the combination:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Once it is in the centre, I give to the image,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
This makes the image get the effect of Object-fit:cover.
Here is a demonstration of the above logic.
https://jsfiddle.net/furqan_694/s3xLe1gp/
This logic works in all browsers.
HTML:
<style>
#foo, #bar{
width: 50px; /* use any width or height */
height: 50px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">
JSFiddle
...And if you want to set or change the image (using #foo as an example):
jQuery:
$("#foo").css("background-image", "url('path/to/image.png')");
JavaScript:
document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";
Many of the solutions found here have some limitation: some not working in IE ( object-fit) or older browsers, other solutions do not scale up the images (only shrink it), many solution do not support resize of the window and many are not generic, either expect fix resolution or layout(portrait or landscape)
If using javascript and jquery is not a problem I have this solution based on the code of #Tatu Ulmanen. I fixed some issues, and added some code in case the image is loaded dinamically and not available at begining. Basically the idea is to have two different css rules and apply them when required: one when the limitation is the height, so we need to show black bars at the sides, and othe css rule when the limitation is the width, so we need to show black bars at the top/bottom.
function applyResizeCSS(){
var $i = $('img#imageToResize');
var $c = $i.parent();
var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();
if(i_ar > c_ar){
$i.css( "width","100%");
$i.css( "height","auto");
}else{
$i.css( "height","100%");
$i.css( "width","auto");
}
}
var Oriwidth,Oriheight;
$(function() {
$(window).resize(function() {
applyResizeCSS();
});
$("#slide").load(function(){
Oriwidth = this.width,
Oriheight = this.height;
applyResizeCSS();
});
$(window).resize();
});
For an HTML element like:
<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>
try this
HTML:
<div class="container"></div>
CSS:
.container{
background-image: url("...");
background-size: 100%;
background-position: center;
}