I have a div which change width depending on browser width, responsive. In the div is an image which in the broadest version of my site is closest to the original image regarding width/height.
When the browser window gets smaller I want the height of the image to remain but overflow of the width to be hidden. The image should be centered in the div. Is this possible?
Full size
Mobile version
Example http://postimg.org/image/v16lb0rft/
It is possible, just use media queries. For example :
#media screen and (max-width: 640px) {
#yourImage{
overflow-x: hidden;
}
}
There is a great jQuery plugin called backstretch. Usually it's used to make full background images like here (clothing website). But it can also be used in a small div of any size.
Backstretch.js
If it's not a problem to hardcode the width of the image then this should work.
img#your-img {
margin: 0 calc(50% - (/* the width of img#your-img */ / 2));
overflow: hidden;
}
I hope this helps, good luck!
I had been trying to find a solution to this for quite some time and finally came across this:
HTML:
<div class="image-wrapper">
<img src="http://placehold.it/350x200">
</div>
CSS:
.image-wrapper {
/* Height 0, padding-bottom, and overflow hidden
give the wrapper height since it won't get a height
from it's child being positioned absolutely */
height:0;
padding-bottom:65%;
position:relative;
overflow:hidden;
width:100%; /* your dimension here (can be px or %) */
}
.image-wrapper img {
display:block;
height:100%;
left:50%;
position:absolute;
top:50%;
width:auto;
/* Negative translate instead of negative margins */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I've tested this and it works. If IE is important to you, you may be out of luck, but I hope this helps!
Here is a fiddle
Related
I have input with set height and width of it in the center of the site (imagine Google) and need its position to be vertically responsive based on the height of the browser window. I was looking for a solution, but couldn't find it.
input {
max-height:4em;
max-width: 25em;
outline: none;
}
One way is to use CSS3 translateY like this..
input {
max-height:4em;
max-width: 25em;
margin:0 auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
http://codeply.com/go/94MsX6EnaO
Make the element position:absolute with a top:50%
Set a height, and a minus margin-top which should be 50% of the height.
How?
The top:50% will push the element top to 50%. But since you want the middle of the element to be in the middle and not the top, you use a negative margin-top to pull the element up the half of it's height.
HTML
<div>
MIDDLE ME
</div>
CSS
div {
height:30px;
top:50%;
position:absolute;
margin-top:-15px;
}
Example:
http://jsfiddle.net/bpa6qgu6/
More detailed: http://jsfiddle.net/bpa6qgu6/1/
Another solution is using jQuery's innerHeight() to set the margin-top;
There is an image inside a container. Image takes 100% of its width and height is auto. But I want to set the height to be at least XXX pixels so when I resize container's width, no matter what, the image stays at least certain height and width increases in order to keep proportions. The problem with my current approach below is that image dimensions get skewed after container is resized.
<div class="imageHelper">
<img src="http://farm8.staticflickr.com/7230/7218149614_e0ba252f73_b.jpg" alt="image" />
</div>
.imageHelper {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
}
.imageHelper img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
max-width: 100%;
width:auto\9;
height: auto;
min-height: 600px;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I have setup Fiddle ( http://jsfiddle.net/5JY8c/1/ ) which you can try to resize and check out why current approach is not working.
This article might help in general:
http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
And this part in particular:
object-fit: cover;
overflow: hidden;
Works with CSS3.
UPD:
As Mark suggested, this approach only works in modern browsers: http://caniuse.com/object-fit
Is this what you are after?
.imageHelper img {
position: absolute;
top: 0%;
left: 0%;
max-width: 100%;
max-height: 100%;
}
See example here
You can change both the height and width of the container.. and the image will always remain proportional.
you can try to relay on line-height and text-align to center your image. Then , using negative margin , you can virtually reduce size of image, at least space that image needs.
if you want image to be width:100% and min-height:600px, it is not coherent and you need to cut something so it keeps its ratio but with some parts hidden .vertical or horizontal.
This in the case your image is part of your content, else , if it is only decoration, a background-image -position & -size should do.
Example with clipping a single image in the flow from its center : http://codepen.io/gc-nomade/full/fdIxe
.imageHelper {
height: 600px;
line-height: 600px;/*set baseline right in vertical middle */
overflow: hidden;
text-align:center;/* center image or texte */
}
.imageHelper img {
margin: -100%;/* reduce virtually to 0 space used by image so it follows from center, line-height and text-align set in parent :) */
vertical-align:middle;/* stands on baseline */
/* keep both height/width flexible */
min-height:600px;
min-width:100%;
}
since this is using basic CSS , compatibility with older browser should be increased :)
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 tried using
In HTML:
<img src="../Resources/title.png" />
In CSS:
img {
width: 200%;
height: 200%;
}
But this scales the images based on the parent tag the image is in. If an image is 150px by 150px I want to scale it to 300px by 300px. I want this to work for all images no matter their size or parent tag. And I only want to use CSS. ideas?
You can do this with the scale() 2D transform, but being one of the flashy new CSS3 features support is incomplete at this time and you need vendor prefixes:
img {
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
}
However I don't believe this takes into account the flow of content, as transforms are done on individual elements and as such do not affect layout. See also the transform-origin property.
If you need good browser support, or you need the content to reflow properly, you'll have to make do with an alternative such as using JavaScript or restructuring your HTML, such that the width and height properties will scale it correctly and affect element flow in a natural way.
You can't using CSS < Version 3 only.
When you set the width/height on an element it is relative to it's container.
Update, as it's been quite some time since this answer was posted.
As a commenter points out, this can be achieved by simply using the zoom CSS property. However, it's not recommended, as it was first implemented solely by IE, in the IE6/7 days, and never formalized into the W3C standard. Instead, what's commonly used nowadays is a CSS transform using the scale function.
More on the scale() CSS function:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
Example:
https://jsfiddle.net/2n5zLhz3/
You can enclose the image in a div and then set its size relative to the parent.
<style type="text/css">
.double{
display: inline-block;
}
.double img{
width: 200%;
}
</style>
<div class="double"><img src="../Resources/title.png"></div>
You can use min-width property on your image to force your width to be larger than its parent div, e.g.
.parent {
width: 300px;
height: 200px;
overflow: hidden;
}
img {
min-width: 200%;
/* center image */
margin-left: -50%;
height: auto;
}
<div class="parent">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Information_example_page_300px.jpg" alt=""/>
</div>
You can double the image by taking the percent you need from window size.
p > img {
width:100%;
height:60vh;
}
"height:100vh;" means 100% from your browsing window.Just have to do the math.
Use the width 110%, because it is in a div and there was extra space.
img {
height: 400px;
width: 110%;
}
I have vertically rotated span element with some text in it:
span{
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
height: 100%;
}
.container{
width: 40px;
height: 500px; /* <- this can change */
}
How can I make it so the spacing between the letters of the text from the span changes depending on the container's height? Basically I want the text to span over the entire height of the element...
...somewhere, in a javascript file far far away...
$(".container").each(function(idx, el) {
$(el).css("letter-spacing", calculateSpacing(el, $(el).height()));
});
You can use the plugin found here, which contains the calculateSpacing function, albeit it works on width, not height (so some modification may be necessary):
http://heychinaski.com/jquery/js/jquery.charjustify.js
I think you can't do it without javascrit, because sizes in % use width but not height.
Write a script that divide the height of the element by the number of chars inside and set it as letter-spacing.