I have an tag which stays at full height on mobile but the width is dropped (which is what I want). Now how do I centre this image? I have tried:
margin 0 auto
text-align: center
None if the usual image centring methods seem to work. You can view the image below:
http://helenshill.com.au/beta2/shop/
I have added:
width: 100%;
Which centres the image but also skews the dimensions. I want the image to maintain aspect ratio but be cut off and be centred.
Give this a try
CSS
.product img{
max-width:100%;
}
Hope this Helps...
Related
Wow, this was harder than I anticipated!
We're trying to use an image sprite as CSS background image on a responsive website in a grid.
Please check out our jsfiddle of the scenario.
So essentially, when this is resized, the background images from the sprite need to be resized to fit the parent container (<span>).
I have converted the background image to a data:image thinking this would be the first step (although I'm not sure) and now not really sure how I can make the background images from the sprite respond.
Everything I have tried so far ends up displaying the full sprite image in each container in the grid.
You're using absolute pixel values and background sizes in fluid setting.
Try converting your background-positions to a fluid unit (like percentage) and adding background-sizes to allow the spritesheet to resize with the container.
By removing the inner height of the image container and applying a padding, you can make the container's height ratio stay the same:
.credits-grid li span.image {
background: url(../images/credits.png) no-repeat;
padding-top: 90%;
height: 0;
overflow: hidden;
background-size: 500% auto;
}
Then by calculating the percentage coordinates of the sprite's location instead of the pixel value, you can allow it to freely move into place as the container changes size:
.credits-grid li span.image.c10 {
background-position: -26% 50%;
}
You can see this in action on this fiddle here: http://jsfiddle.net/nsvka987/2/
I want to centre a banner image of size 1920x225px in a div 960px wide.
the problem occuring is that the image is not in the centre as it starts from top left.
Heres an image to describing the issue
http://tinypic.com/r/scco0m/5
Try using
background-position: center center;
on your background image.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
You did not mention here, how you adding he image in a website
if you are giving background image
give css like this background:url(../image.jpg) center center no-repeat;
If you don't want background image just give max-width:100% for that image
New Answer.
You need to give position:relative for the div having width:960px
and for the image add like this
img{position:absolute; left:50px; top:20px; z-index:999}
You can change the Left and top value according to your Wish
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
I would like the logo and the image slider to center on my responsive site.
Basically, the logo and the slider are next to each other on a full size screen. I can make the slide disappear when the site isn't wide enough and the logo shrinks.
What I want to do is make the logo and the slider center once they are no longer next to each other.
Please help: http://ranchocordovaeventscenter.com/
Thank you,
Matt
You can center the child elements of hgroup tag by setting margin: 0 auto;text-align:center on the hgroup
this will cause the contents to be centered within that div
Put the logo and slider in a div and give it a fixed width. If this div has #inner id, the solution will be:
#inner {
width:1000px;
display:block;
}
the given answers will only work if you use both of them, centring with margin: 0 auto; only works if a width is specified, and having a div just display as a block will not change the appearance.
Try the css:
div {
width: 500px;
margin: 0 auto; }
along with other styling, and it should center
I have a fixed nav bar at the top and a container with a full width Background spanning span12. but since the content of the background image is crucial for the layout for visual cue. i want the whole image to be displayed at all times irrespective of the window size.
Which is the best way to construct the image or set of images to achieve the same.
Large Monitor
Medium Monitor
Small Size
I have a form that will be displayed to the right of the image. Hence making it a little tricky for me to get the image working.
Link: play.mink7.com/minkstock/
If I understand correctly, you want just to have a maximum size (or percentage) that your image can reach. Try, instead of a background image, using a <img> element like so:
img{
max-width: 100%; /* or any other value */
height: auto;
}
Is there any reason you chose to set the background image using css?
If i change the #landing-page-bg div to
<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;">
<img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg">
</div>
It produces the desired effect you want (minus some red background you set).
If you wanted to then overlay items on the image you could use relative div positioning.
Do something like background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat; for your small media query.