I am not able to position an image within a div so that:
it's higher than the div and sticks out
starts at the very bottom of the div (there is a small gap that I can't close)
This is the relevant HTML:
<div class="teaser-image-wrapper">
<div class="wrap">
<img class="image2 more-height" src="images/svg/creativeyou.svg" alt="Creative You! Title Image">
</div>
</div>
And the CSS I have:
.teaser-image-wrapper {
background-color: #83ffcd;
width: 100% !important;
margin:
}
.wrap {
width: 80%;
}
.teaser-image-wrapper img {
padding: 0 !important;
object-fit: contain;
max-height: 75vh;
max-width: 100%;
line-height: 0;
}
Here is an image for reference: The greenish background of the wrapper (.teaser-image-wrapper) should be lower than the image (svg) that should stick out on the top. Also, notice the little gap at the bottom.
Thank you for any hints
The easiest way to achieve something like this could be to use position absolute and relative. Maybe try setting the class wrap to relative and the image absolute, with
left:0;
right:0;
bottom:0;
and then play around with the position of 'top', can then set a height of the wrap class to try and achieve the desired effect. May be better ways to do this but without playing about with it this is what is off the top of my head. hope this helps
OK, after some tinkering solved it.
I wanted to achieve this:
This is the CSS. I basically push the wrapper - div down while pulling the image inside up.
.teaser-image-wrapper {
max-width: 80%;
margin: 40vh 10% 0;
padding: 0;
line-height: 0;
}
.wrap {
width: 100%;
background-color: #83ffcd;
height: 50vh;
margin-top: 25vh;
}
.teaser-image-wrapper img {
padding: 0 !important;
object-fit: cover;
height: 75vh;
width: 100%;
line-height: 0;
position: relative;
margin-top: -25vh;
}
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
On my main page, I have an image that moves around or wraps around on browser resize. I just want to change it so that the image gets cut from the right if the browser is small.
I have tried a few things to no avail:
Remove the float on the div id right and the relative positioning on right-image
Try min-width for div id right
Give height, widths in percentages
Added viewport settings.
In the template, the image is placed outside the main like:
<body>
<div id = "main">
<div id = "left">
<div id="left-title">Tag Line</div>
<div id="left-blurb">
Some blurb
</div>
<div id='left-signup'> SignUp! button</div>
</div>
<div id = "right">
<div id = "right-image"></div> <--- Image
</div>
</body>
Relevant css:
body {
margin: 0 auto;
height: auto;
overflow-x: hidden;
}
#main {
float: center;
width: 950px;
overflow: visible;
height: auto;
margin: 0 auto;
}
#left {
float: left;
width: 500px;
display: inline-block;
}
#left-title {
font-size: 3.4em;
margin: 25px 0px 20px 15px;
}
#left-blurb {
margin: 0px 20px 10px 15px;
}
#left-signup {
margin: 0px 0px 0px 90px;
}
#right {
float: right;
width: 600px;
height: 400px;
margin-top: -10px;
display: inline-block;
}
#right-image {
height: 100%;
width: 100%;
position: relative;
left: -50px;
top: 0px;
background: url(my_photo.jpg) no-repeat;
-moz-background-size: cover;
background-size: cover;
z-index: 0;
}
I think that is the css that is relevant to the question. But if it is not enough, the website I am talking about is https://www.mathnuggets.com
Will appreciate any insights.
You can add a media query to just remove it from the document when your document size is less than a certain number of pixels.
#media screen and (max-width:480px) {
#right-image{
display: none;
}
}
Otherwise, you can also adjust its positioning as you've done using the same method, just adjusting its position depending on window size. The issue I'm seeing in your code is that you're using a -10px margin that is causing it to overlap your other elements, so you could simply change that for certain viewport sizes.
In addition, you might want to consider changing your sizing method from being absolute using pixels and instead use percentages so that your image can flex a little as your viewport changes.
This site has a lot of great resources I think could help you to work with your existing design so that it can be more responsive as needed: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
If you use
position: absolute;
for ID=right div it will never go under left div
I have an image, and I want to set it a specific width and height (in pixels)
But If I set width and height using css (width:150px; height:100px), image will be stretched, and It may be ugly.
How to Fill images to a specific size using CSS, and not stretching it?
Example of fill and stretching image:
Original Image:
Stretched Image:
Filled Image:
Please note that in the Filled image example above: first, image is resized to 150x255 (maintained aspect ratio), and then, it cropped to 150x100.
You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")
.cover {
object-fit: cover;
width: 50px;
height: 100px;
}
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
See example here
There's a polyfill for IE: https://github.com/anselmh/object-fit
Related: object-position (specifies the alignment of an element's contents within its box.)
If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.
.container {
width: 150px;
height: 100px;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
<div class="container"></div>
While cover will give you a scaled up image, contain will give you a scaled down image. Both will preserve the pixel aspect ratio.
http://jsfiddle.net/uTHqs/ (using cover)
http://jsfiddle.net/HZ2FT/ (using contain)
This approach has the advantage of being friendly to Retina displays as per Thomas Fuchs' quick guide.
It's worth mentioning that browser support for both attributes excludes IE6-8.
Enhancement on the accepted answer by #afonsoduarte.
in case you are using bootstrap
There are three differences:
Providing width:100% on the style. This is helpful if you are using bootstrap and want the image to stretch all the available width.
Specifying the height property is optional, You can remove/keep it as you need
.cover {
object-fit: cover;
width: 100%;
/*height: 300px; optional, you can remove it, but in my case it was good */
}
By the way, there is NO need to provide the height and width attributes on the image element because they will be overridden by the style. so it is enough to write something like this.
<img class="cover" src="url to img ..." />
The only real way is to have a container around your image and use overflow:hidden:
HTML
<div class="container"><img src="ckk.jpg" /></div>
CSS
.container {
width: 300px;
height: 200px;
display: block;
position: relative;
overflow: hidden;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
It's a pain in CSS to do what you want and center the image, there is a quick fix in jquery such as:
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);
http://jsfiddle.net/x86Q7/2/
CSS solution no JS and no background image:
Method 1 "margin auto" ( IE8+ - NOT FF!):
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
top:0;
bottom:0;
margin: auto;
width:100%;
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
http://jsfiddle.net/5xjr05dt/
Method 2 "transform" ( IE9+ ):
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
width:100%;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
http://jsfiddle.net/5xjr05dt/1/
Method 2 can be used to center an image in a fixed width / height container. Both can overflow - and if the image is smaller than the container it will still be centered.
http://jsfiddle.net/5xjr05dt/3/
Method 3 "double wrapper" ( IE8+ - NOT FF! ):
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 0;
bottom: 0;
margin: auto;
display: table;
left: 50%;
}
.inner img {
display: block;
border: 1px solid blue; /* just for example */
position: relative;
right: 50%;
opacity: .5; /* just for example */
}
<div class="outer">
<div class="inner">
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>
http://jsfiddle.net/5xjr05dt/5/
Method 4 "double wrapper AND double image" ( IE8+ ):
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 50%;
bottom: 0;
display: table;
left: 50%;
}
.inner .real_image {
display: block;
border: 1px solid blue; /* just for example */
position: absolute;
bottom: 50%;
right: 50%;
opacity: .5; /* just for example */
}
.inner .placeholder_image{
opacity: 0.1; /* should be 0 */
}
<div class="outer">
<div class="inner">
<img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<img class="placeholder_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>
http://jsfiddle.net/5xjr05dt/26/
Method 1 has slightly better support - you have to set the width OR height of image!
With the prefixes method 2 also has decent support ( from ie9 up ) - Method 2 has no support on Opera mini!
Method 3 uses two wrappers - can overflow width AND height.
Method 4 uses a double image ( one as placeholder ) this gives some extra bandwidth overhead, but even better crossbrowser support.
Method 1 and 3 don't seem to work with Firefox
Solution not requiring image as a background and will auto-resize without being cut-off or distorting.
Another solution is to put the image in a container with the desired width and height. Using this method you would not have to set the image as a background image of an element.
Then you can do this with an img tag and just set a max-width and max-height on the element.
CSS:
.imgContainer {
display: block;
width: 150px;
height: 100px;
}
.imgContainer img {
max-width: 100%;
max-height: 100%;
}
HTML:
<div class='imgContainer'>
<img src='imagesrc.jpg' />
</div>
Now when you change the size of the container the image will automatically grow as large as it can without going outside the bounds or distorting.
If you want to center the image vertically and horizontally you can change the container css to:
.imgContainer {
display: table-cell;
width: 150px;
height: 100px;
text-align: center;
vertical-align: middle;
}
Here is a JS Fiddle http://jsfiddle.net/9kUYC/2/
Not using css background
Only 1 div to clip it
Resized to minimum width than keep correct aspect ratio
Crop from center (vertically and horizontally, you can adjust that with the top, lef & transform)
Be careful if you're using a theme or something, they'll often declare img max-width at 100%. You got to make none. Test it out :)
https://jsfiddle.net/o63u8sh4/
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
min-width:100%;
min-height:100%;
height:auto;
position:relative;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
}
Building off of #Dominic Green's answer using jQuery, here is a solution that should work for images that are either wider than they are high or higher than they are wide.
http://jsfiddle.net/grZLR/4/
There is probably a more elegant way of doing the JavaScript, but this does work.
function myTest() {
var imgH = $("#my-img").height();
var imgW = $("#my-img").width();
if(imgW > imgH) {
$(".container img").css("height", "100%");
var conWidth = $(".container").width();
var imgWidth = $(".container img").width();
var gap = (imgWidth - conWidth)/2;
$(".container img").css("margin-left", -gap);
} else {
$(".container img").css("width", "100%");
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight)/2;
$(".container img").css("margin-top", -gap);
}
}
myTest();
after reading StackOverflow answers the simple solution I got is
.profilePosts div {
background: url("xyz");
background-size: contain;
background-repeat: no-repeat;
width: x;
height: y;
}
I helped build a jQuery plugin called Fillmore, which handles the background-size: cover in browsers that support it, and has a shim for those that don't. Give it a look!
This will Fill images to a specific size, without stretching it or without cropping it
img{
width:150px; //your requirement size
height:100px; //your requirement size
/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
object-fit:scale-down;
}
Try something like this: http://jsfiddle.net/D7E3E/4/
Using a container with overflow: hidden
EDIT: #Dominic Green beat me.
I think it's quite late for this answer. Anyway hope this will help somebody in the future.
I faced the problem positioning the cards in angular. There are cards displayed for array of events. If image width of the event is big for card, the image should be shown by cropping from two sides and height of 100 %. If image height is long, images' bottom part is cropped and width is 100 %. Here is my pure css solution for this:
HTML:
<span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>
CSS
.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}
you can do it by 'flex' display. for me!:
.avatar-img {
display: flex;
justify-content: center;
align-items: stretch;
border-radius: 50%;
border: 1px solid #dee2e6;
height: 5.5rem;
width: 5.5rem;
overflow: hidden;
}
.avatar-img > img {
flex-grow: 1;
object-fit: cover;
}
<div>
<div class="avatar-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqczw3Fb_TYsj0hbPEy0u7Ay2bVq1KurD6hw&usqp=CAU" alt="Test!'s profile photo">
</div>
<div class="avatar-img">
<img src="https://i.pinimg.com/236x/a1/37/09/a137098873af3bf6180dd24cbe388ae9--flower-iphone-wallpaper-wallpapers-flowers.jpg" alt="Test!'s profile photo">
</div>
</div>
To fit image in fullscreen try this:
background-repeat: round;
<div class="container">
<img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>
<style>
.container {
width: 150px;
height: 100px;
overflow: hidden;
}
</style>
As far as I know, there is a plugin to make this simple.
jQuery Plugin: Auto transform <img> into background style
<img class="fill" src="image.jpg" alt="Fill Image"></img>
<script>
$("img.fill").img2bg();
</script>
Besides, this way also fulfills the accessibility needs. As this plugin will NOT remove your <img> tag from your codes, the screen reader still tells you the ALT text instead of skipping it.
you have to use background-size : cover in the css
js code
<div>
<div className={styles.banner}>banner</div>
</div>
css code
.banner{
background:
url("./images/home-bg.jpg");
background-size: cover;
height: 53rem;
width: 100%;
}
object fit is not working
background-size: contain is also not working
Hi I am having problems positioning several images. It is very important that max height of the site stays at approximately 580 pixels as I want to give the impression of a picture frame around the site. I have attached a picture to show how exactly the site is laid out and where I want to position my images in the top, middle and bottom divs. I do not want to have them as background images because I want to have some as links and I want to have some jquery animations (i.e. fadeIn and toggle) with the other images. This is a fluid layout but I do not want the vertical width to expand when the browser is at the min width of 780px, I also would like that the images are some what centred on the page.
I am still learning CSS so I have done the best I can but it is still out of position.
Thanks for your help
Site Layout Picture
.container {
width: 100%;
max-width: 1096px;
min-width: 780px;
margin: 0 auto;}
.header {
background:#231f20;
height: 65px;
}
.sidebar1 {
padding: 0px;
float: left;
width: 65px;
background: #231f20;
margin: 0;
min-height: 450px;}
.sidebar2 {
float: right;
width: 65px;
background:#231f20;
margin: 0;
min-height: 450px;}
.main_content{
padding: 0px;
width: 80%;
float: left;
}
.footer {
height: 65px;
background:#231f20;
position: relative;
}
HTML
<body>
<div class="container">
<div class="header"></div>
<div class="sidebar1"></div>
<div class="main_content">
<div class="top"></div>
<div class=”middle"></div>
<div class=”bottom"></div>
</div>
<div class="sidebar2"></div>
</div>
</body>
Add position: relative to all the containing div's (you may have to set the height of them to the height of the tallest image also). Then position all the images something like:
.img1 { /* or whatever class name works for you */
position: absolute;
left: 50%; /* this centers it, if you want thirds, us 33%, 66%, etc. */
margin-right: -50px; /* note: 50px is an example, it needs to be half the width of your image width */
}
Try adding clear: both; to the CSS for the .footer. This will force it to the bottom of the "picture frame".