On this page, there are some staff photos.
On an iPad in portrait mode, the staff photos are cut off on the right hand side.
I don't mind them being cut off, but I'd like them aligned center, instead of aligned left.
Note, I want the image dimensions to be the same, just the alignment shifted to the left to become centered, so that faces show in the middle of the image boundaries.
I've tried the following solutions from this question:
.ult-ib-effect-style13.ult-ib2-min-height img {
display:block;
margin:auto;
}
and
.ult-ib-effect-style13.ult-ib2-min-height {
text-align: center;
}
and
.ult-ib-effect-style13.ult-ib2-min-height {
display: flex;
justify-content: center;
}
but none of these are working.
First of all, I checked your css and it's a complete mess !
You defenitly should rework it off a bit. All those !important statements are terribly wrong practice.
However, I tweaked up a bit your img styles and found out a solution that fits your needs.
The trick was to override all the other width and height styles that applied to your images and simply replace it by a style which only set size of images based on heigth of container.
This solution prevent your images from being distorted.
I also reset the translate3d style so the images are centered in container.
.ult-ib-effect-style13.ult-ib2-min-height img {
min-width: auto!important;
width: auto!important;
max-width: none!important;
height: 100%!important;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
Result:
Edit :
Result # width: 900px
It's still good, images are centered and no distortion. However, you could make your divs wider at this breakpoint for a more elegant overall result.
See below for example :
Set the column (.col-sm-3) at 50% width and img to heigth: 120%; max-heigth: none;
EDIT:
As said in comment, try to put the <link> tag of your own css in the end of your <head> after all the other stylesheet your site loads.
This will cause your css to be rendered last and your styles to override the previous ones. Then try changing back your rules to those proposed in the explanation above.
This should do the trick.
for image you can use:
img {
display: block;
margin: auto;
width: 100%;
}
or you can use Bootstrap
then assign class "img-responsive center-block"
I know some of the solutions may work, but there's more to your problems. Its bad practice to insert an inline height or width. Plus you must know the exact size of your image, before you use it. Using image holders help with that. You used the height attribute to make your image smaller. If your image does not fit the container, then you'll always have problems that's why you must always know the exact height and width of the images that your going to use. It also help with performance. On Smaller Screens, there's more issues with your images. The right side is black out simply because of the size of the picture. With responsive design, you want your images to be more square then rectangle, even if its not perfect. The css is a mess, and you are using useless attributes and style properties and values. Simply resize the pictures with a similar width and height of the container (col-sm-3) and then use bootstrap "img-responsive" class and all will be fine.
Sorry I understood it wrong. So basically you want to center your oversized image in small div.
So your parent div (Image Parent) is positioned relatively. First of all you don't need lot of css you have written for your image class. Remove all of that from 'ult-ib-effect-style13.ult-ib2-min-height img' class.Now your code will look like
.ult-ib-effect-style13.ult-ib2-min-height img {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
height: 100%;
}
Even if you not going to remove your css from image class this will work for all screen widths!
Possible duplicate of this question.You can also position your image relatively in case of absolute parent. Don't forget to use transform, moz-transform for cross browser compatibility as mentioned in link.
If your concern is only ipad portrait mode and browsers like chrome, safari or firefox, then use object-position.
object-position: center center;
object-fit:cover;
If you need support in IE or Edge then it wont work in that.
You can mention any position you want, 'center center' is 50% from left and 50% from top.
Kindly clean your code a bit, there are lot of important overrides.
Just add following CSS
#media (max-width:1024px) {
.ult-ib-effect-style13.ult-ib2-min-height img {
width: 100% !important;
max-width: none !important;
height: auto !important;
}
.ult-new-ib {
max-height: 330px;
}
}
You have this css code for images
.ult-ib-effect-style13.ult-ib2-min-height img {
width: auto!important;
max-width: none!important;
height: 100%;
}
Add also this three lines
position: relative;
left: 50%;
transform: translate(-50%, 0);
And You Win))
Just add following css:
.ult-ib-effect-style13.ult-ib2-min-height img {
left: 50%;
transform: translateX(-50%);
}
Related
For whatever reason I am really beating myself up with this... No doubt because of the lack of support for a real "proper" way of vertically centering anything.
The Goal:
Is to have a set of four images, each inside their own responsive columns. Each image has a white overlay, that when hovered reveals more of the image, as well as a title for each of the 4 images that is horizontally and vertically centered inside the image.
I could easily achieve this if I set specific width/heights and stuck the image inside CSS rather than the HTML. For SEO reasons I want the image to be present in the HTML.
Additionally because of the responsive nature, the images must scale to 100% of the width of the column they reside in. Consequently, because the width scales, the height scales as well.
So the first issue is getting the "caption" as I am calling it in my classes, to appear over the top of the image. Easily done with a simple position: absolute; as well as top: 0; and left: 0; on the caption and position: relative; on the container.
The big problem and second issue, is vertically centering the "Gallery 1" text over the top of the image. I have to use the position: absolute; bit as I mentioned above just to get the text over-top of the image. From there I can't manage to get a display: table; solution to work, nor a -50% margin solution to work.
Here is a JS Fiddle
My HTML:
<div class="container">
<img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" />
<div class="caption">
Gallery 1
</div>
</div>
Any ideas on how to achieve this? I would like to stay at least IE8 supported, and I am using selectivizr already, so pseudo-classes don't bother me.
First, I wasn't sure about what you mean exactly. But as you mentioned:
The issue is centering the text Gallery 1 vertically over the top of the image. Centering it horizontally is easy with a simple text-align but centering it vertically is what is eluding me.
Here is my attempt to align the text vertically over the image. Actually the concept comes from this approach of a similar topic on SO:
.container { position: relative; }
.container img {
vertical-align: bottom; /* Remove the gap at the bottom of inline image */
max-width: 100%;
}
.caption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font: 0/0 a; /* Remove the gap between inline(-block) elements */
}
.caption:before {
content: ' ';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.caption a {
font: 16px/1 Arial, sans-serif; /* Reset the font property */
display: inline-block;
vertical-align: middle;
text-align:center;
background: rgba(255, 255, 255, 0.75);
width: 100%;
padding: 1% 0; /* Added a relative padding for the demo */
}
WORKING DEMO.
This relies on CSS2.1 and it will definitely work on IE8+ (excluding rgba()).
If I understand your issue correctly, this may work for you:
Working Demo
If you need the image to scale when hovered over, then simply adding a :hover on the container and changing it's width should work.
CSS:
.container {
// existing styles
-webkit-transition: all .2s; // needs prefixes for other browsers.
}
.container:hover {
width: 500px;
}
The only issue is that transition has no support for IE9 or earlier. So you'd need to go a JS route if that is an issue.
I want to create an header image for my website.
I would like the image is always in the middle would have standing. When someone's browser reduced, the image in the center stand. Now I have an example that this site contains only get there no matter how this is done.
http://aarkcollective.com/
#Leeish has the right idea.
Another way is to use the following css
.center_element {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* half of the height of the header */
margin-left: -150px; /* half of the width of the header*/
}
With the HTML:
<img class="center_element" src="images/header_image.jpg" width="300" height="100">
div{
margin: 0 auto;
width: [whatever]%;
}
As long as your image/div has a fixed width or percent so it scales, it will stay centered with a left and right margin of auto. This is probably a duplicate question so you should probably look around for another answer.
EDIT
I am editing my answer based on your comments. I made this fiddle to do what I was talking about. http://jsfiddle.net/P8eDT/ I put two divs in it. One with an image and one without so you can see. The inner div is flexible width, set height, and stays centered. The image inside the second one is "responsive" in that it will always match the width of the div. As far as I can tell this is exactly what they are doing in your example site you posted. Posted below is the code for the INNER div (The one that is the image).
#inner {
width: 50%;
height: 100px;
margin: 0 auto;
background-image: url(/path/to/image.jpg);
background-size: cover;
background-position: center;
}
Please note you will need a javascript fall back for older versions of IE that do not support background-size:cover. I've done this before and I just use javascript to measure the width/height and which ever is longer I just set that one.
you can use position:fixed in your css
say that your header has a class of .header and a width and height of 800x50
in your css try:
.header{position:fixed; top:50%; left:50%; margin:-25px 0 0 -400px;}
edit if you do not want it to center vertically Leeish has the better solution
I'm in the midst of making a navigation bar. I came here earlier and got some help re-organising and coding said item. All seemed great and it seemed like it should work but when using the following code instead of each image resizing, it only showed X% of the images height and Y% of the images width. I cannot figure out what is going wrong.
CSS:
#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; }
#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }
Please refer to how it looks looks on my website to see what I mean.
Please also refer to my other navbar question.
Thank you.
Background images don't resize. They are shown in full size and are clipped if the container is smaller.
What you can do:
The best approach is to resize the images to the target size
A hackish approach is to use absolutely positioned <img> tags as background and <span> text as foreground.
<div class="hasBg">
<img>
<span>text</span>
<div>
.hasBg{
position:relative;
}
//will autofit depending on how span stretches the container
.hasBg img{
position:absolute;
top: 0;
bottom: 0;
left: 0;
}
.hasBg span{
position:absolute;
}
A native but new feature is to use the new CSS3 background-size. but this is not cross-browser afaik
Since you've done it as a background image, the width and height attributes only apply to the div, not the image.
You have two options.
Resize your images to fit the dimensions
have your images on your page and use javascript for your hover effect
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%;
}
How can I vertically align a table in the middle of the screen with css?
Generally something along the lines of this works pretty well in any block element with a defined height.
table {
position: absolute;
top: 50%;
margin-top: -50%;
}
Centering on the page is harder since you don't have a defined height, but I think this works.
html {
height: 100%;
}
You may encounter some browser differences, act accordingly.
Shortly said, just make your body a table, because vertical-align does work on table-cells:
body, html {
height: 100%;
}
body {
display: table;
}
#wrapper {
display: table-cell;
vertical-align: middle;
height: 80%;
}
This will vertical align your pagewrapper to middle and let it be fluid 80%
If you can give the table a fixed height, then feel free to adapt the CSS from this site I've just done.
Bit complicated to explain, but basically you set a 1 pixel high 'horizon' at 50% height of the screen around your content, then offset the top of the element to be centred (i.e. your table) by 50% of its height.
EDIT: Here's the article I originally made my solution from, with explanation & everything.