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
Related
I want to prevent page-reflow, caused by image loading on a web page.
Page reflow occurs when images load after the page's text content has already rendered. There's a 'jerk' caused by the said page-reflow. It makes for awful user experience.
My requirements are:
(i) All images be fully responsive
(ii) Have a max-width of 450px (while maintaining aspect-ratio)
(iii) Be center-aligned within their containers
There can be several images on the page. All have different aspect ratios (but scaled to the same width - i.e. 450px). I know their dimensions beforehand.
Currently my code is simply:
.container {
text-align:center;
overflow:hidden;
background:whitesmoke;
border-top:1px solid #F0F0F0;
border-bottom:1px solid #F0F0F0;
}
.container img {
width:100%;
max-width:450px;
vertical-align: top;
}
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
This fulfils all my requirements - except it can't prevent page reflow. How do I tweak this to get my desired result?
Traditional solutions to prevent such page-reflow go something like this:
HTML
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
CSS
.container {
display: block;
position: relative;
padding-bottom: calc(100%/(450/562));/* example width=450px height=562px*/
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This works fine. But it doesn't impose a max-width like I need it to. The image fills the entire container - as large as that container is (e.g. the full width of the screen on a laptop).
To tweak it, I tried adding max-width:450px;max-height:562px in .container img. That corrected the image's dimensions. But it gave the container extra padding at the bottom:
That's a shame. What I really wanted was for it to look like below:
Note that the gray colouration above is the background container, which simply disappears on smaller resolutions:
What's the best way for me to achieve my requirements? An illustrative example would be great.
Note: adding max-width: 450px;max-height: 561px; in .container doesn't solve the problem either.
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%);
}
I am using a wordpress template to control my website. On the home page is a small header with "Home About Us Contact Us" etc etc and then below that is an image that transitions to another image which transitions to another image. This image is too large for my liking so I am trying to shrink it. So I go to the CSS and adjust the image size, however because there is text on the bottom of the image it is being cut off.
I would like to maintain the image width but just make it a little shorter, say about 75% of the original design.
Below is what I think is the applicable code
.camera_wrap {
height: 672px!important;
max-width: 1920px;
display: none;
position: relative;
z-index: 0;
margin: 0 auto 60px!important;
I added the height: 672px!important; code which makes it about the height I want but again the bottom gets cut off. I would prefer to have the CSS re-size the image instead of clip it. But all of my searches haven't turned up how to do this. I am just finding the re-size attribute.
Try using a path to the img rather than the images class to control the styling for the image.
example html
<div class="image-div">
<img class="image">
</div>
instead of
.image { height: 500px; }
try
.image-div img { height: 500px; }
Also, here's an example of a fiddle and an example in that fiddle of how to affect change to only the second image using nth-child
https://jsfiddle.net/Hastig/g6m5nqc9/1/
.image:nth-child(n+2) {
height: 75px;
}
I'm trying to think of a clever way to deal with a part of a webpage where the image is going to be swapped out with different images (of varying widths, max being 620px wide), and a text caption is absolutely positioned over it. I want the text to absolutely position based on the width of the image rather than the width of the relatively positioned container.
I was thinking maybe something with background-image, rather than an image itself, but then I have to deal with the fact that it's an empty div with a background image, so I'd have to hardcode a height, which wouldn't work since some of these images would be taller than others.
Any solutions you guys can think of would be greatly appreciated. Thanks!
I'm not sure if I'm following 100%, but here's how to do what I think you're trying to do.
Create your container with position relative, set your widths and heights, and set overflow to hidden:
.container-outer {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
Next, create an inner container inside of it that simply has position: absolute
.container-inner {
position: absolute;
}
Finally, create your overlay text style to be 100% width and center horizontally (or however you want it to be positioned)
.overlay {
position: absolute;
text-align: center;
width: 100%;
margin: 0;
}
Here's the jsfiddle with an example: http://jsfiddle.net/BGvca/1/
Good luck!
I raise the previous answer with some more CSS
<div class="imageholder">
<div class="caption">Simon & Garfunkel</div>
<img src="http://greenobles.com/data_images/simon-and-garfunkel/simon-and-garfunkel-03.jpg">
</div>
.imageholder{
position: relative;
float: left;
}
.caption{
position: absolute;
top: 0;
left: 0;
right: 0;
font-family: Helvetica,sans-serif;
font-size: 1em;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 1em 2em;
}
See the jsFiddle for reference.
If you make the div containing the image inline-block, its width will scale to the size of its content, ie your image.
Once the container is sizing correctly, you can center other child elements, like your caption, inside it using a wrapper with text-align: center, or no wrapper and value of auto for the left and right margins.
Here's an example: http://jsbin.com/uyajaw/3/edit (with ugly borders and backgrounds to show where stuff is)
Click the image to resize it and see the caption still centered.
Note that if your caption is likely to be larger than your image, it will probably expand the width of the container div, throwing off the center alignment. You can avoid this by making the setting position: absolute; left: 0; right: 0; on the caption, or by giving it a width that you know will always be smaller than your image.
I don't know if I'm over-thinking this, but here's a way to do it. If you specifically don't want to align the caption with the wrapper div, then you'll need to also account for the imagesLoaded event (jQuery plugin). Otherwise, you will either have an img width of 0 if not loaded, or you'll have the previously loaded img width in there (unless you go back to it).
Take a look at this Fiddle that shows a fixed width wrapper div and the caption centered on it.
Edit 2: It seems clear that no one seems to be able to understand what I'm asking, so I'll try to illustrate it;
The area in the center has the id #navigation. This has the following CSS properties,
width: 960px;
margin: auto;
background: #e4bd04;
The reason it has a width of 960px, is because I would like the links in my navigational bar to remain within a 960px limit. I'd also like them centered, so I apply margin: auto. However, this means that my background only flows for 960px. I'd like the background to flow for the entire window width (100% of page), so that users with larger screens don't end a huge chunk of white space at the top.
In order to prevent this, I nest #navigation into another id, #navouter, to which I apply width: 100%; and background: #e4bd04;, so that the background now appears to extend for the entire width of the window.
Is there any way to do this without using two elements as I've done?
I've undestood, you don't want to have 2 div to center another div with fixed width, isn't it ?
I don't think that you'll love it, but this is a solution :
.nav {
width:960px;
position:absolute;
left:50%;
margin-left:-480px; // width / 2
}
<body>
<div class="nav">Test content</div>
</body>
Result for 300px div : http://jsfiddle.net/7GTCc/1/
Or another, really ugly (lol) :
.nav {width:960px;}
<center>
<div class="nav">Test content</div>
</center>
Edit regarding your illustration
"Is there any way to do this without using two elements as I've done?"
No :-)
But if you only want the background to be 100%, don't specify a background (color or url) to your #navigation.
Last try to answer, test this :
#navigation {
min-width:960px;
text-align:center;
}
Demo here : http://jsfiddle.net/7GTCc/3/
you could use min-width property , dont know what exactly you are looking for
<div style="min-width:960px; width:100%"></div?
Yes, this is easy to do without additional markup. Use the ::before pseudo-element for the expanding part of the navigation.
Demo: http://jsfiddle.net/ThinkingStiff/eAf7w/
HTML:
<div id="nav">navigation</div>
CSS:
#nav {
background: #6D7B8D;
height: 40px;
margin: 0 auto;
width: 400px;
}
#nav::before {
background-color: lightblue;
content: '\00a0';
display: block;
height: 40px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}