I have an image and I want the height to be constant.
The width I want to be 100% of the container.
However, as you shrink the container, I want the image to truncate the right hand side so it doesn't go out of proportion.
You want the height to be 100% and the visible width to be 100%. Something like this:
<div id="container"><img src="http://mypic.jpeg" /></div>
div#container { height: 200px; width: 150px; overflow: hidden; }
div#container img { height: 100%;}
Related
I'm trying to make an image overflow it's container. I have set the image to 100% height, and it's stretching. I want instead for it to overflow its container's width (I need to then hide that overflow). It's the right most part of the image I'm interested in.
Code coming...
If you set the height of the image to 100% of its container and if nothing is specified about the width, the width should change proportionately i.e. if too wide it should overflow as required. There should be no stretching.
.container {
width: 200px;
height: 200px;
border: solid 10px red;
}
.container img {
width: auto;
height: 100%;
}
<div class="container">
<img src="https://picsum.photos/id/1016/500/300" />
</div>
So, is there something else in your CSS that is causing the stretching? e.g. are img widths set somewhere? (Hence, just in case, the width is explicitly set as auto in the snippet).
I have an image with a 600px width.
It needs to be inside a bootstrap col-xs-6 or 12 div with a width of 300px and has to be resized if the screen width is smaller than 300px.
How can I realize that using width and max-width in CSS?
just do this:
img {
width: 100%;
max-width: 300px;
height: auto;
}
I think this will solve your problem.
img {
width: 100%;
max-width: 300px;
}
If the div width is bigger than 300px image will have maximum width of 300px. If div is smaller than 300px image should fill 100% width of div.
.my-image {
max-width:300px;
width:100%;
}
These rules basically mean, display the image at the full width of its container unless the container is larger than 300px, in which case, limit the image to 300px.
I am trying to make an image resizable.
I have a specific height for this image: height: 100% (inside a container) and a width: auto; (i want the width to be adapted to the height about the natural image size).
Everything works fine when i access the page, but when i resize the window, the height is correctly resized, but the width keeps its initial value, i want it to be proportional (like when i access the page for the first time) to the height.
Is there a way to do it in CSS ? If not, what is the more optimize solution ?
Here is an illustration in code:
HTML
<div class="container">
<img alt="test" src="/img/test.png">
</div>
CSS
.container {
height: 100px;
width: 100%;
}
.container img {
height: 100%;
width: auto; //i need it to be adapted to each height about the natural image's dimensions
}
UPDATE
Here is a jsfiddle
http://jsfiddle.net/CRGj6/1/
Sometime it works sometime it doesn't...
window resize affects only the width of the element but not the height. It is kinda make sense because if you resize the height, more content is scrollable that means don't do anything to width but to increase the scrollbar length (so more content to be scrolled). Assuming that you want to preserve the aspect ratio of the image,
.wrapper .container img {
position: relative;
height: auto;
width: 100%;
}
would be the solution to this problem.
I am rendering an image into a div. I want to avoid stretching of my image.
div {
height: 300px;
width: 300px;
}
img {
min-width: 300px;
min-height: 300px;
max-height: 300px;
}
My problem is that my image's width stretches. I want it to have the regular width even though parts of the image will be missing.
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
height: 300px
max-width: none;
min-width: 300px;
}
You can achieve this with simply adding object-fit: cover;. An example might be like -
img {
height: 300px
width: 100%;
object-fit: cover;
}
I would forget setting the min-height and the max-height. Just set the height to be 300 pixels and put an overflow hidden on the div tag. That way no matter what the image size it will always stay in proportion and never go outside the boundaries of your div tag.
div { height: 300px; width: 300px; overflow: hidden; }
img { height: 300px; }
Put the image as the div background if you want to avoid stretching the easiest way (yet maintain the original width).
To make it more flexible as just using 300px use:
img {
width: 100%;
object-fit: cover;
}
Height is automatically adjusted
just specify max-width 100% and height :auto
Use max-width instead of min-width, and just set height to 300px (or only use max-height).
You can use overflow:hidden to hide any portion of the image outside of the width of the div.
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
/*min-width: 300px;*/
height: 300px;
}
==>If you are gonna have fixed height and don't want width stretched
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
height: 300px
}
==>If you are gonna have fixed width and don't want height stretched
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
width: 300px
}
After giving the image a fixed height and width, I added object-fit as below:
img {
width: 300px;
height: 300px;
object-fit: contain;
}
To avoid the image from resizing use:
object-fit: none;
More about object-fit
The CSS object-fit property is used to specify how an or
should be resized to fit its container.
This property tells the content to fill the container in a variety of
ways; such as "preserve that aspect ratio" or "stretch up and take up
as much space as possible".
Object-fit Values
fill: this is default. The image is resized to fill the given
dimension. If necessary, the image will be stretched or squished to
fit.
contain: the image keeps its aspect ratio, but is resized to fit within the given dimension
cover: the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none: the image is not resized scale-down - the image is scaled down to the smallest version of none or contain.
More info and examples
I'm adding this to expand on the answers given since some of the answers given like adding width:100% height:auto" etc., will still technically stretch Images and/or make them blurry at times. Let me explain.
I work on a lot of eCommerce websites adding products etc and image stretching/blurring is always a problem. Most times, an image scaling down isn't that much of a issue, so the answers given as far as width:100%; height: auto; etc., work just fine. But there are problems when scaling up if the image's container width is larger than the image's native/normal width.
So for example, if you have an image whose width is 100px, and a div container whose width is 200px, if you add a width:100% and height: auto; to your image randomly, this won't technically "stretch" an image, but it will make it look blurry because you are stretching your image past its normal width.
To fix this, one thing i normally do is something like this, assuming on the desktop, that you have an image that you want to show at its 100% native width with no scaling/stretching/blurring whatsoever, I do something like:
img{
display:block;
margin:0px auto;
width: initial;
height: auto;
}
which keeps my images at their native width with no scaling whatsoever. But then, when an image is going to be seen on a smaller device, I add the same rule block into a media query and do something like:
#media all and (max-width: 1200px){
img{
width:100%;
height:auto;
}
}
What this is effectively saying is "Hey Image, make my image responsive from point A to point B(mobile devices), but once you go from point B to point C (small laptops to desktops where the image fits normally and doesn't need to stretch), make the width equal to its default native width".
Hope this helps. Happy coding everyone.
I am trying to set the width of the .full_height_div element using pure css, based on its height. It has to be width-relative-to-height, and not height-relative-to-width. The reason for this is that the parent container (.set_rectangle_height) is already a div with height relative to the page width. Obviously, as the page is resized the divs on the page will resize, so i cannot set a fixed width in px for the .full_height_div child.
So .rectangle and .set_rectangle_height make up the parent container which has a width as a percentage of the page and a height relative to this width. See here for an explanation for this method.
But the problem is that then I want to place a div inside the parent with height: 100% and width relative to this height. The aim is then that I will be able to alter the browser window size and everything will keep its aspect ratio.
here is my failed attempt:
.rectangle
{
position: relative;
width: 30%;/*the outermost div is always a % of the page
width, even while resizing*/
display:inline-block;
background-color: green;
}
.set_rectangle_height
{
padding-bottom: 30%;/*this sets the height of the outermost div
to a ratio of 1:3*/
position: relative;
float: left;
width: 100%;
height: 100%;
}
.full_height_div/*this is the div that i want to have a width relative
to its height*/
{
height: 100%;
width: 20px;/*i will delete this once .square_set_width is working*/
position: absolute;
background-color: red;
}
.square_set_width
{
display: inline-block;
padding-left: 100%; /*i want to use something like this line to set
the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
ratio, but padding-left does not work :( */
position: relative;
height: 100%;
background-color: blue;
}
<div class='rectangle'>
<div class='set_rectangle_height'>
<div class='full_height_div'>
<div class='square_set_width'></div>
</div>
</div>
</div>
So, this is what the above incorrect markup looks like:
And this is what i want it to look like:
I know I could find the blue square percentage height in javascript, then set the width to be equal to this height, but it would be really handy if there is a pure css fix for what I am trying to do. I will be using this structure a lot and I don't really want to go writing code to resize all the divs on my page.
you have to use javascript for that. If I understood you, you want a perfect blue square. Use
var height = $('.square_set_width').height();
$('.square_set_width').css('width',height);
here is a jsfiddle: http://jsfiddle.net/a8kxu/
Edit: instead of doing padding-bottom: 30% do height: 70% instead. Here is another fiddle: http://jsfiddle.net/a8kxu/1/
Edit #2: Sorry, but you cant use css to do this. Its not powerful enough
If i understand you correctly
you can do
#divID {
width: 75%;
margin-left: auto; // this is used to center the container
margin-right: auto;// this as well
}