showing image in a box that has a different image ratio nicely - html

I have an image with an original size of 900x300. I have an image container that has a size of 320x180. When I show this, the image looks squezeed. I understand it's because the ratio is not the same. So I am planning to show a zoomed version of it, but with just manipulating it's CSS. Is it possible? Also open to any other ideas that can show this image nicely using CSS tricks without having it looked squished in this box.
Here's a fiddle to play with. I am currently setting the width and height to 100% and hide overflow's.

It's because the ratio of your image is 3:1. You need to make your container size 3:1 as well... if you want your width to be 320px, then you have to set your height to 106px (106.6px to be exact), or something else proportionate to your original image. Here's an updated fiddle.
.boutique-grid .box-container {
position: relative;
height: 106px;
width: 320px;
}
You'll notice it's now proportionate.

If you want a zoomed version then you can use css background property in css. Here is the code if this is what you wanted:
.box-container {
position: relative;
height: 180px;
width: 320px;
background:url("http://cf.shopious.com/images/store_logos/original/9f84c96905ade833f48054cda524c7960dc0f424.png") no-repeat;
background-position:-500px -50px;
}
and remove the img from html.
this gives the effect of zooming

Your Question don't supply that what type of zoom you wants, But I can give you an idea, If you want that the image should be zoom at their place, with the full size then use follwoing CSS with the hover property:-
.boutique-grid .box-container:hover {
position: absolute;
width:900px;
height:300px;
}
See the fiddle here:-http://jsfiddle.net/npsingh/3m9aK/6/show/
Also If you like to provide a zoom with the popup then you can achieve this by following link:-
http://cssdemos.tupence.co.uk/image-popup.htm
If you want to crop the image with the center property and then use in that continer then you should be crop the image with the margin property, by that way you can crop your image with the same aspect ratio. See the post below:-
http://www.squareonemd.co.uk/how-to-crop-an-image-with-a-css-class/
Let me know if it will works...

.box-container img {width:100%;
height:auto;}
Add above code to your css. So that image will not squezeed.

Just remove the image element from the HTML and use background-image in your CSS instead.
Then you can use the cover argument for the background-size. This will take care of zooming the image to fit the box as well as keeping it proportional:
.boutique-grid .box-container {
position: relative;
width: 320px;
height: 180px;
background-image:url(...);
background-size:cover;
background-position:center;
}
MODIFIED FIDDLE HERE
With this approach you won't need to worry about re-calculating the sizes as the browser will do it for you.
Use the background-position to fine-adjust its position.
More details on background-size:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Related

Adjust layout images and size

I'm trying to adjust the images and size depending the page size to doesn't go outside the grid, but I couldn't make it.
I tried add theses lines below in CSS but it bugged the others images
img{
width: 100%;
max-width: 800px;
}
The content should adjust the size of the image, but it isn't working
The image going outside the grid:
You can see the live preview here
Just give max-width for image to 100%
img {
max-width: 100%;
}
do the exact opposite you are doing
img {
width:800px; /* this is optional */
max-width: 100%;
}
OP's comment:
I already dropped it (the width:800px), but it messed with the images at right sidebar.
Then create a class something like img-resposive and for that class apply max-width: 100%. And use that class in images you want/need to
I suggest if you are trying responsive design, use 50em; instead of 800px
They are both equal (except when window is resized.)

How to hide this image behind it's container?

To have a responsive design, I made this <img> to have max-width:37%;. But when I open the jsFiddle window far enough to make it wide enough, the image extends over it's containers size and won't fit anymore.
This is a screenshot I made:
But I want the overlapping sides not to be shown, like this (photo edited):
If you want to see it in action, use my fiddle.
The image should not be seen further than the boundaries of its containers are. How can I prevent that the image is bigger than its container?
I assume that you want the entire image to stay visible. So, you need to set the max-height property to 100%.
.mbox img {
max-height: 100%;
max-width: 37%;
position: absolute;
right: 0;
z-index: -1;
}
Here is a jsfiddle.
Update: Since you want the image to keep the max-width:37% you need to hide the overflown part.
I added a div that wraps the div.mbox_content and the img. I gave to this div the class mbox_wrapper. You also need to add the z-index:2 property to the <h2>.
.mbox_wrapper {
overflow:hidden;
position:relative;
}
.mbox h2 {
z-index:2;
}
Here is an updated jsfiddle.
Just need to change the z-index property
you need to apply a max-height tag to the css..
Then the image won't be able to exceed the height of the containing div.
max-height: 100%;

Avoid image stretching

so I have an image tag on my page that is set to 300px height. When a bigger image is used for it, the image is stretched so it fits and it gets really ugly. Is there a way to just get a part of the image instead, preferably the top 300pxs of it?
Hope I made myself clear, I'm new to this. Thank you!
I believe
overflow:hidden;
is what you're looking for. You put that property on a div that surrounds the image, not the image itself. Here's a good resource: http://css-tricks.com/almanac/properties/o/overflow/
Here's a code sample:
<html>
<head>
<style>
.overflow{
height:100px;
width:200px;
overflow:hidden;
}
img{
height: 200px;
}
</style>
</head>
<body>
<div class="overflow">
<img src="http://funmozar.com/wp-content/uploads/2014/06/white-cat.jpg">
</div>
</body>
</html>
You could also want to consider using the max-height and max-width properties. Make sure not to set both height AND width on the image or it will still stretch it to match those parameters.
probably the best solution in order to avoid image stretching is to use a div with fixed size (width and height), background-image and use background-size propriety.
example:
html:
<div id="yourDiv"></div>
css:
#yourDiv {
width: 200px;
height: 200px;
background-image: url('yourimage.jpg');
background-size: cover;
}
Please have a look here for other information about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
A possibility is to use the object-fit CSS property on the image. For instance, the value contain will scale down the image so that its original ratio is maintained; while the value cover will crop parts of the image. You can then use the object-position property to properly place the scaled down or the croped image.
For more information on these CSS properties and their differents values:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
You can wrap the image in an element, set fixed dimensions for the container and no dimension settings for the image but overflow: hidden on the image. Here’s an example of using small dimensions:
An image:<br>
<img src="http://www.lorempixel.com/100/100" alt="foo"><br>
The same image with just the upper half taken:<br>
<div style="width: 100px; height: 50px; overflow: hidden"><img
src="http://www.lorempixel.com/100/100" alt="foo"></div>

Responsive image max height 100% doesnt work in firefox

i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)

Background image center and resize

I'm working on a site for a client in which there's a background image that will be centered on the page with text, links, etc. overlayed.
I currently have the image resized as follows:
img.bg
{
height:100%;
position:absolute;
}
This fits the image to the height of the browser, but aligns it to the left. I need it to be centered.
Since I need it to be conditionally responsive to browser-height variations, the usual centering tricks aren't working.
Thanks!
Try removing "position:absolute" and adding margin: 0 auto. For example:
img.bg
{
height:100%;
margin: 0 auto;
}
or may be just place it inside a table <table align="center"> <tr><td>"image goes here"</td></tr> it's easier to manage cause you can add more items to the webpage in future without difficulty, add borders, change colours of tables, etc.
I can think of a couple ways to go about it (untested, so you'll probably have to tweak):
img.bg {
position: absolute;
/* Top and/or bottom for stretching it vertically as needed. Setting both will likely make it the size of the whole body, so beware. Remove bottom to keep it from doing that if necessary. */
top: 0;
bottom: 0;
/* Left and/or right for sizing/positioning */
left: 25%; /* Percentage position will make it adjust to browser window size, exact percent may need to be tweaked to get right and will depend on the image's size. */
}
img.bg {
display: block;
height: 100%;
width: 500px; /* Whatever your desired width is. */
margin: 0 auto; /* This should work as long as width is set. */
}
Depending on your exact design, either of these should work and be responsive to the size of the browser window. The second one is probably the most flexible and easiest to implement, since you don't have to fiddle with positioning.
The answer depends on exactly what you are after.
If you want an image displayed in the background of the website (which I think you are saying) then I am not sure what method you are using, but if you do away with your img.bg{} in your html and css, and just put the following into your CSS you will get what you want...
body{
background-image:url('background.gif'); // substitute background.gif for the correct file path
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:auto 100%;
}