I've been trying to find an answer online so I didn't have to post, but I can't find a solution!
I'm using a carousel from bootstrap, and my images won't fit. I put the carousel inside a div named "slide". I set width and height on slide, and put a background color to make it easier to see. When I set width in percentage a on my img it resizes to take up the whole width of it's parent container. But when I set height on the img, it makes the image huge!! I want to stretch the image to fit, I don't care about keeping the original ratio. Also if I set the height in pixels or vh it has an affect, the only thing that doesn't work is percentages.
Guys, what am I missing here?
Width 100%
Code
Height 100%
Code
.slide {
width: 300px;
height: 300px;
overflow: hidden;
background: #000;
}
.slide img {
width: 100%;
height: 100%;
object-fit: contain; /* When you use Contain proparty you can see full image with black background*/
object-fit: cover; /* When you use cover proparty you can see it's cover a box as per main div width */
}
<!-- Here I use Display flex instant of float right -->
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
My suggestion is You can use cover CSS.
Related
I dont really have anything to show, but i'll try to explain.
I am using HTML and CSS and i have a background image the size of the moon. (3840x18509 pixels). How can i add this as a background on the page, get it to scale automatically to the screen, and make it scrollable? What i mean by that is that i want to be able to scroll all the way to the bottom of the long picture. using :cover is not doing it, and when i set height:18509px; The image gets wider than it's supposed to be so that it cuts out on the sides.
I want the website to be as wide as the original picture, and as high as the original picture. I want to show the entire picture in a way that it fits the screen width, but must be scrolled downwards to reach the bottom. Thanks in advance.
body, html {
margin: 0;
padding: 0;
border: 0;
background-image: url("HuronWP.png");
background-repeat: no-repeat;
background-size: cover; I dont want it to cut the image height,
i want to scroll down to see the rest.
}
}
If you know the exact size of the image you simply have to set the aspect-ratio of <body> to match the image: body { aspect-ratio: 3840 / 18509; }
body {
margin: 0;
background-image: url('https://www.tacoshy.de/stackoverflow/3840x18509.jpg');
aspect-ratio: 3840 / 18509;
}
Alternativly you could insert the image directly and use width: 100% to fit the screen while maintaining its aspect-ratio.
img {
width: 100%;
display: block;
}
/* for styling purpose only */
body {
margin: 0;
}
<img src="https://www.tacoshy.de/stackoverflow/3840x18509.jpg">
I think you want to scroll you image whenever it becomes wider or longer than your page. You can do this simply using css overflow property.
overflow:scroll;
Just adding this to our code it will work fine.
Whenever the image height or width will be larger than you container then it will automatically be a scrollable.
Here I have created a div class and put my image inside this div.
<div class="image">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
alt="img"
/>
</div>
Now I am changing the height and width of my <img> so that it will overflow the <div> class.
height and width of image.
img {
height: 1000px;
width: 1000px;
}
height and width of outer div
.image{
height: 900px;
width: 900px;
overflow: scroll;
}
This property will be valid only when the outer div must have smaller height and width than the inner,
I am using plain old css no bootstrap or anything. I want to make an img element responsive,thus shrinking and expanding while maintaining its proportions up to a maximum height. I have looked over several SO responses but have not found something that matches my use case. How would I achieve this. I have it kind of working with the following code.
<div class="imageContainer">
<img src="{{employee._image}}">
</div>
img
:max-width 100%
:height auto
.imageContainer
max-height: 300px
This solution works as the image gets smaller and it works when the image gets bigger up to the maximum height of the div at which point the image image overflows. I want it to stay within that div while maintaining its proportions. I have tried various combinations using max-height on the img and the div, but have not gotten it to work. Thanks for any help that can be provided!
The images have to be set dynamically, so hardcoding the url in css with background image is not an option.
Try setting the css top and bottom properties to 0px.
img
:max-width 100%
:height auto
:top 0px
:bottom 0px
To have an image set to a max-height of a div, the height property of the imager must be inherited from its parent.
The answer and theory around it can be found here: Child with max-height: 100% overflows parent
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}
I believe I was able to achieve your goal like this:
img {
max-width: 100%;
max-height: inherit;
}
I have 2 div's named first and second and I have set the width and height of them as 100%
.first{
width : 100%;
height : 100%;
}
.second{
width : 100%;
height : 100%;
}
now I would like to add an image in each div. These images should fill in the entire div.
<img src="someimage.png" width="100%" height="100%"/>
My problem is the image should not be stretched it should be filled the entire screen. I have used img img-responsive classes to achieve this. The image is now getting filled without stretching but when resized it is getting resized uniformly and the height of it is also getting decreased hence the image's height is now not getting filled 100%. Is there any way to achieve width and height of an image to cover the entire screen without stretching and decreasing the height?
Check this out, and you should use width: 100% beside min-height: 100% but i recommend you to use background-image with background-size: cover
.first{
width : 100%;
height : 100%;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.first img {
width: 100%;
min-height: 100%;
}
<div class="first">
<img alt="" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97500&w=500&h=500"/>
</div>
jsFiddle
I use imgLiquid this is a jQuery Plugin to resize images to fit in a container.
https://github.com/karacas/imgLiquid
It's super easy to use and light weight.
I want to set the image as a background in a div so that the source can be changed for each device for its image resolution. the problem is I don't want to set the height of the div, but only it's width which is 100% so that it can be fit with the device window's width. Therefore, I want the height is automatically generated based on the width of the div.
I have set the height of auto, but the div is not appear unless I set the height with value.
#imagetree {
position:absolute;
z-index:12;
width:100%;
height:auto;
bottom:0;
overflow: hidden;
background: url(images/trees.png);
background-repeat: no-repeat;
}
if you knew in advance the ratio between width and height of your image you could cheat using a proportional padding-bottom
E.g If your image were 300x180 you may use this css
#imagetree {
position:absolute;
z-index:1;
bottom:0;
overflow: hidden;
background: url(http://dummyimage.com/300x180/000000/fff.jpg);
background-repeat: no-repeat;
width: 100%; /* use 100% of width */
padding-bottom: 60%; /* 180px is 60% of 300px */
background-size: cover; /* cover the div entirely with the background */
}
Example: http://codepen.io/anon/pen/ruBFt
When you give position: absolute, the height and width are not set initially. You need to manually set them using CSS. In your case, since you have put background as an image, being positioned absolutely, why do you wanna set it as background-image?
You can put the image in the <img /> tag itself and then render with normal widths and heights that are proportional to the image too! Change your code by adding an image inside the absolutely positioned container.
<div id="imagetree">
<img src="images/trees.png" />
</div>
And in the CSS, you may wanna give this:
#imagetree img {max-width: 100%;}
I want a <img> whose width is 40% of the page, and it gets stretched.
How can I resize it without stretching?
For example, if I have a image whose file originally looks like this:
____8888________
____8888________
____8888________
In my webpage, normally, it should looks like:
____8888________
____8888________
____8888________
As soon as I make the browser a little more narrow, the max-width(let's say 10 characters in this example) would take effect.
When that happens, I would like it to be:
____8888__
____8888__
____8888__
(just like it's been cut from the right side. Of course from both sides are better),
Rather than:
__888_____
__888_____
__888_____
Any trick (putting it into a <div>'s background) is okay.
Width and height are unknown.
Thank you all for your previous answers, but, sorry, I think I haven't put enough emphasis on "After limiting its width to 40% of the page", which means before width-limiting it should looks normal.
The trick is to put the image into a containing block element, eg a DIV. Once inside set the width of the image to 100%, this will instruct the browser to fit the image width flush with the left and right edges of the DIV.
You then control the width of the DIV via CSS, I find keeping the image in a block element makes manipulation much easier when creating fluid layouts.
Example:
img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" />
</div>
If you wan the image to be clipped/cropped in any way, set it to be larger than it's parent, and set the parent's overflow css to hidden.
Example:
img.clipped {
width: 150%; /*Scales image to 150% width of parent container*/
float: left; /*Floats image to left of container - clipping right hand side*/
float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
overflow: hidden;
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>
Hope this helps...
Add this class to the img html tag, it will keep the image as it is, but will take the necessary specified space ie.40% x 40% without stretching the image
.img{
width:40%;
height:40%; //change to whatever your choice
/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/
object-fit:scale-down;
}
Here's a few options. (see the demo of all these options here: http://jsfiddle.net/Squeegy/Gcrdu/ )
The first as a plain image of unknown size. This displays at whatever size it happens to be.
<img src="http://www.google.com/logos/classicplus.png">
But as it turns out, you can preserve the aspect ratio of an image if you only set the width, or only the height. The other dimension will adjust itself to keep things from stretching.
// HTML
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink">
// CSS
img.aspectshrink {
width: 100px;
}
But when you use CSS background images you can do some creative cropping based on where anchor the background.
This says "Go"
// HTML
<div class="cropped-right"></div>
// CSS
.cropped-right {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: left center;
background-repeat: no-repeat;
border: 1px solid red;
}
And this says "gle":
// HTML
<div class="cropped-left"></div>
// CSS
.cropped-left {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: right center;
background-repeat: no-repeat;
border: 1px solid red;
};
Try to use ImageResizer.
Here's the link : http://imageresizing.net/
Do you mean cropping the image? If so look into CSS overflow property. Also you could put it into the background and centre it in the div