I have certain images that are smaller in width which i stretch the width to fit the container, however would like the hieght to scale up as well, thanks in advance, Phil
In your css:
img {
width: 100%;
height: auto !important;
}
CSS can naturally handle this. The image will automatically take up 100% of the width of its container, and the height will scale to match.
There is no need to specify the height.
Take a look to my example, here is my jsfiddle
http://jsfiddle.net/d575tr49/
Here is the HTML
<div class="ele">
<img src="http://viralstash.net/wp-content/uploads/2014/03/521013543_1385596410.jpg" border="0" />
</div>
Here is the CSS
.ele {
outline: red solid 1px;
width: 250px;
}
.ele img {
width: 100%;
display: block;
}
If you control the width on the Parent element, just the with, you will not need to worry about the width and height values of the image.
The image it self will set its width using the parents size, and by default the height value will be proportional to the width, so no need to specify the height value at all, not even in the parent.
Related
I have a paragraph floated in right and an image floated in left. They are staying in the same row.
Now I want to make the paragraph and image height always be the equal, whichever browser they run in or whatever the window or screen size they get. Their size should match automatically. How do I do it?
In my program I have used width and height, but I am not sure they can fix the size automatically.
This piece of code I am working in: Also look in https://jsfiddle.net/d6pyyub2/
.HTML:
<p>
The height of this paragraph must be the same as the height of
the picture.
The height of this paragraph must be the same as the height of
the picture.
The height of this paragraph must be the same as the height of
the picture.
</p>
<div id="image">
<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" width="200" height="200" >
</div>
.CSS:
p{
margin-left:240px;
}
#image{
margin-top:-210px;
}
By adding a container you can set a block size dependent of another block size.
You set the image fixed to border of the container
#image{
position: absolute;
top:0px;
bottom:0px;
}
#image img {
height: 100%;
width: auto;
}
#container
{
position: relative;
}
The p block set the height of the #container, and the image block follow the move. Fixed size by attributes in img tag are removed to set it at the full height of #image block.
https://jsfiddle.net/d6pyyub2/6/
edit:
As Daniel Ruf says in comment, there is a ratio problem with the image. Another solution is to set the image to the background of #image container.
https://jsfiddle.net/d6pyyub2/7/
In order to keep the ratio, the image will stop scale up his size if its witdh need to be superior to 240px, the fixed width of the first col.
There you go: http://jsfiddle.net/d6pyyub2/4 this should solve your problem
.image {
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
}
.para {
line-height: 1.5;
text-align: justify;
padding-right: 5px;
}
I am playing around with a responsive layout and I am trying to get my image handling to behave a specific way.
I want the max-width of my image to never exceed its actual resolution, however if that is too wide for the screen I'd like the width to be 90% of the screen width. The only solution I can come up with for this is set width: 90%; and then to hard-code the max-width for every image I want to display like this, which is problematic if I want to change the image on the fly or update it frequently.
Is there any CSS I can use to describe this scenario or do I have to rely on javascript tricks to set the max-width from the image's actual width once the image has finished loading?
I think the following may work. Set the max-width: 90% and the let the image take its natural width (width: auto, default value).
See the samples below.
There is an end-point (corner case) when the image size is identical to the width of the containing block (screen size). In this case, the image will take 90% of the width of the parent block. If you need this to be 100%, you would need jQuery/JavaScript to take care of the exception.
div {
border: 1px dotted blue;
margin: 10px 0;
}
div img {
max-width: 90%;
vertical-align: top; /* Removes white space below baseline */
}
.ex1 {
width: 500px;
}
.ex2 {
width: 400px;
}
.ex3 {
width: 300px;
}
<div class="ex1">
<img src="http://placehold.it/400x100">
</div>
<div class="ex2">
<img src="http://placehold.it/400x110">
</div>
<div class="ex3">
<img src="http://placehold.it/400x120">
</div>
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 am trying to figure out how to re-size an image so that it keeps it ratio of width to height, but gets re-sized until the height of the image matches the height of the containing div. I have these images that are pretty large and long (screenshots), and I want to put them into a 200px width, 180px height div for display and without re-sizing the images manually. To make this look good, the sides of the image need to overflow and be hidden with the containing div. This is what I have so far:
http://jsfiddle.net/f9krj/2/
HTML
<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
<img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>
CSS
a.image_container {
background-color: #999;
width: 200px;
height: 180px;
display: inline-block;
overflow: hidden;
}
a.image_container img {
width: 100%;
}
As you can see, there is grey color showing on the images parent container which should not be shown at all. In order for that container to be filled completely, the width needs to be overflowed equally on both sides. Is this possible? Is it also possible to account for an image that is also too tall?
Original Answer:
If you are ready to opt for CSS3, you can use css3 translate property. Resize based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.
Your need, HTML:
<div class="img-wrap">
<img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/200/300/nature/" />
</div>
And CSS:
.img-wrap {
width: 200px;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
}
div > img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
Voila! Working: http://jsfiddle.net/shekhardesigner/aYrhG/
Explanation
DIV is set to the relative position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.
The image is set as a BLOCK element, min-width/height both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it's parent. min is the key. If by min-height, the image height exceeded the parent's height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;
Now image, this is set to an absolute position with left:50% and top:50%. Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.
Magic moment:
transform: translate(-50%, -50%);
Now, this translate function of CSS3 transform property moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.
Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%) will calculated to translate(-100px, -75px). % unit helps when we have various size of image.
This is just a tricky way to figure out centroid of the image and the parent DIV and match them.
Apologies for taking too long to explain!
Resources to read more:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
https://css-tricks.com/centering-css-complete-guide/
Change your code:
a.image_container img {
width: 100%;
}
To this:
a.image_container img {
width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
height: 100%;
}
http://jsfiddle.net/f9krj/5/
Use max-width property of CSS, like this :
img{
max-width:100%;
}
you can use flex box for it.. this will solve your problem
.image-parent
{
height:33px;
display:flex;
}
If you take answer's Shekhar K. Sharma, and it almost work, you need also add to your this height: 1px; or this width: 1px; for must work.
For me the easiest way to do it without using position absolute, translate.
<div class="img-container">
<img src="yoururl" />
</div>
the CSS should look like this :
.img-container {
height:100px;
width:100px;
overflow:hidden;
}
.img-container > img {
width:100%;
height:100%;
object-fit:cover;
}
If all your trying to do is fill the div this might help someone else, if aspect ratio is not important, is responsive.
.img-fill > img {
min-height: 100%;
min-width: 100%;
}
I have a div with width:100px and height:100px (say)
Inside that, there is just an image, for which height is always fixed to 100px.
I want to make the image horizontally center.
Here there are 3 cases:
image's width is equal to div's width, no issues
image's width is less than div's width, I can use margin: auto here
image's width is more than div's width
I want the center part of the image to be visible inside the div.
means, if image's width is 120px and as div's width is 100px and overflow:hidden
I want image's 10th px to 110th px to be visible (so, the left: 10px and right: 10px of image are hidden under the div )
Is this possible through some CSS property?
(I dont know the width of image which is loading! so I want it to be dynamic.
Also want to avoid javascript side calculations to find the extra amount of width and giving margin-left: -ve value bla bla.. )
Also, I can't give the image as background-image for the div!
See: http://jsfiddle.net/thirtydot/x62nV/ (and without overflow: hidden to easily see the centering)
This will work in all browsers, with the possible exception of IE6.
For .imageContainer > span, the margin-left is derived from the width, and the width is an arbitrary number which controls the maximal image width that will be supported. You could set width: 10000px; margin-left: -4950px; to support really wide images, if required.
HTML:
<div class="imageContainer">
<span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>
CSS:
.imageContainer {
border: 1px solid #444;
overflow: hidden;
width: 100px;
height: 100px;
margin: 15px;
text-align: center;
}
.imageContainer > span {
display: block;
width: 1000px;
margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
display: inline-block;
}