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.
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'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.
thanks for helping!
I set 2 images of -
800X1000
Image 1 :
Set in a container that set to :
width: 100%.
The image I also set to -
width: 100%
Image 2 :
Set without a container, without any special order.
I set a border to my container -
And when resizing the screen, to about the 800px mark -
The container started to shrink and didn't take the 100% width I set.
(Therefore , the image is also shrunk).
Once I removed image number 2, it as expected - take the full 100% width of the screen.
Why is that?
Why once I had 2 images inside, the second Image basically cause the to shrink?
This is my code ( nothing special, 2 CSS lines)
.alon {
width: 100%;
border: 5px solid green;
}
.alon img {
width: 100%;
}
<div class="alon">
<img src="images/donald.jpg" alt="">
</div>
<img src="images/donald.jpg">
HTML above.
Your second image has no styling, you basically just dropped an image in the body container and never specified a width for it.
With the code you provided, the second image will keep its default width, while the image in the .alon div will take the width of its parent container. In this case, the image in the .alon div is taking 100% width of the browser, and the image within is taking 100% width of the .alon div.
I've included an example below that applies 100% width to the second image as well.
body img {
width: 100%;
}
* {
box-sizing: border-box;
}
.alon {
width: 100%;
border: 5px solid green;
padding: 0px;
}
.alon img {
width: 100%;
padding: 0px;
}
body img {
width: 100%;
}
<div class="alon">
<img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094__340.jpg" alt="">
</div>
<img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094__340.jpg">
After running the code you will notice that the second image takes 100% width of the browser like your first image.
If you delete the following CSS:
body img {
width: 100%;
}
The second image will go back to its default size.
Additionally, to further answer your question, since your first image is enclosed in a div that has a 5px green border, the default box-sizing on a browser will not calculate your border as part of the declared width of 100%, which in turn, will offset your image container by 5px.
To make the browser calculate the 5px border as part of the container width of 100% you can apply a universal box-sizing: border-box to your document.
I've included this in the snippet above for reference.
This is my HTML:
<div>
<img src='image.png'>
</div>
and this is my CSS:
img {
width: 100%;
color: orange;
background-color: orange;
}
div {
width: 200px;
height: 500px;
border: 1px solid black;
}
fiddle: http://jsfiddle.net/ro764g6o/
The image becomes 100% width of what the div is. Is there a way I can say "Use the original width of the image if the '100%' (the width of the container) is greater than the original width of the image"?
For example, assume the div's width is 50px and the images original width is 60px (the width of the div is dynamically generated based on screen size. The image is determined by the end user). In this case, the width of the image should be 100%.
However, if the div's width is 70px and the images original width is 60px, then the width should remain the same.
Is there anyway to achieve this with HMTL and CSS? If no, is there anyway to achieve this using Django / Python?
Yes. It's called max-width:
img {
max-width: 100%;
/* ... */
}
http://jsfiddle.net/ro764g6o/1/ - resize pane to see
I have a div with the following CSS
#mydiv{
top: 50px;
left: 50px;
width: 200px;
height: 200px;
}
and my HTML looks like this
<div id = "mydiv">
<img src = "folder/file.jpg" width = "200px" height = "200px">
</div>
I'd like my web image to always be the same size (in a 1:1 aspect ration) no matter what the resolution of the actual image is. If my actual image files are square (with 1:1 ratio) then this isn't a problem. But if the actual image files are not square then the displayed web image do stretch to 100% of both the div's height and width (in this case 200px).
How do I get different image sizes to fit to my DIV?
You're mixing notations. It should be:
<img src="folder/file.jpg" width="200" height="200">
(note, no px). Or:
<img src="folder/file.jpg" style="width: 200px; height: 200px;">
(using the style attribute) The style attribute could be replaced with the following CSS:
#mydiv img {
width: 200px;
height: 200px;
}
or
#mydiv img {
width: 100%;
height: 100%;
}
Instead of setting absolute widths and heights, you can use percentages:
#mydiv img {
height: 100%;
width: 100%;
}
Or you can put in the CSS,
<style>
div#img {
background-image: url(“file.png");
color:yellow (this part doesn't matter;
height:100%;
width:100%;
}
</style>
will the height attribute stretch the image beyond its native resolution? If I have a image with a height of say 420 pixels, I can't get css to stretch the image beyond the native resolution to fill the height of the viewport.
I am getting pretty close results with:
.rightdiv img {
max-width: 25vw;
min-height: 100vh;
}
the 100vh is getting pretty close, with just a few pixels left over at the bottom for some reason.