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;
}
Related
I have a div profile_pic which has the following CSS:
#profile_pic{
position:absolute;
border:1px solid #E1E3E4;
left:25px;
top: 25px;
width: 200px;
height: 200px;
}
Since profile picture for my application can be any image (of any size), the div or image, should be flexible to adapt to one another. I have tested a profile picture with the dimensions of 300px width and 300px height and the image renders perfectly in the the div. However, when I upload a picture with say, 550px width and 400px width the image is appearing "squashed" which is understandable.
There are two options, 1. resizing the image so that the whole image appears in the div and 2. cropping the image so that the image adapts to the div size. I do not mind adopting either of these approaches but I am unable to implement how these approaches in code.
I have tried to set:
#profile_pic {width: 50%}
#profile_pic img {width:100%}
But it just does not work. How can I get the div (or image) to always fit in the div's size without the image losing it's quality?
You could just add background-size:contain; to the div that has the image (assuming you are setting the background image the image you want.
losing quality is another thing, scaling say a 50x50px image to 100x100 is going to lose quality, so it would probably be best to set a minimum size the profile picture can be.
You may set max-width and max-height in order to resize image to fit inside the box without overflow, add line-height and text align to center image in case it has not the same box ratio.
#profile_pic,
.profile_pic2 {
position: absolute;
border: 1px solid #E1E3E4;
left: 25px;
top: 25px;
width: 200px;
height: 200px;
line-height: 197px;
/* since image is the one and single child */
text-align: center;
border: solid;
/*demo purpose */
}
.profile_pic2 {
left: 250px;
}
.profile_pic2 +.profile_pic2 {
left: 450px;
}
#profile_pic img, .profile_pic2 img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
/* set on middle baseline setted at 200px */
}
<div id="profile_pic">
<img src="//lorempixel.com/640/480">
</div>
<div class="profile_pic2">
<img src="//lorempixel.com/480/640">
</div>
<div class="profile_pic2">
<img src="//lorempixel.com/480/480">
</div>
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 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.
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 two divs wrapped by another div. One of the div's is a header, the other will contain an image. I want the content div to wrap the with the correct aspect ratio of the image.
The wrapper div has minimum widths and heights specified. The image can have an arbitrary width specified. The height of the content div should adjust depending on the image height.
It works fine in FF, but in IE6 the header width does not change when the wrapper div changes to accommodate the specified image width.
Here's a fiddle. fiddle
Here's a picture of the problem: Image
In IE6, the header element is going to take up the amount of space defined by it's container element. In this case #testWrapper, which is set to 100px. IE6 won't play very nicely with absolutely positioned elements or floats with widths set to auto. I'd suggest defining the width that you want in #testWrapper and setting the img to 100%, if possible.
#testWrapper{
position:absolute;
bottom: 0;
left: 0;
margin: 5px;
border: 1px solid black;
width:150px;
}
#testHeader {
background: blue;
height: 10px;
}
#testContent {
background: black;
}
#testimage {
display: block;
width: 100%;
}