Im currently building a horizontal scrolling portfolio. I want the images to be 100% high and width:auto. Everything works perfectly (pure CSS), but if the browser window gets smaller than the image width, it gets compressed.
Here is the link: http://www.bastards-design.de/wordpress/category/allgemein/portfolio/grafik/#alina
if the browser window gets smaller than the image width, it gets compressed.
I've looked through your code and found the following CSS in it, which causes the images to compress. If you remove it, the images would not compress.
img{
max-width:100%;
}
Seems like this rule is being inherited from bootstrap.ccs you are using. You should remove this rule or override it.
you need to remove max-width from bootstrap.css
you have currently as below:
img {
border: 0 none;
max-width: 100%;
vertical-align: middle;
}
not try removing max-width: 100%; as below:
img {
border: 0 none;
vertical-align: middle;
}
this should work.
Related
I am using plain old css no bootstrap or anything. I want to make an img element responsive,thus shrinking and expanding while maintaining its proportions up to a maximum height. I have looked over several SO responses but have not found something that matches my use case. How would I achieve this. I have it kind of working with the following code.
<div class="imageContainer">
<img src="{{employee._image}}">
</div>
img
:max-width 100%
:height auto
.imageContainer
max-height: 300px
This solution works as the image gets smaller and it works when the image gets bigger up to the maximum height of the div at which point the image image overflows. I want it to stay within that div while maintaining its proportions. I have tried various combinations using max-height on the img and the div, but have not gotten it to work. Thanks for any help that can be provided!
The images have to be set dynamically, so hardcoding the url in css with background image is not an option.
Try setting the css top and bottom properties to 0px.
img
:max-width 100%
:height auto
:top 0px
:bottom 0px
To have an image set to a max-height of a div, the height property of the imager must be inherited from its parent.
The answer and theory around it can be found here: Child with max-height: 100% overflows parent
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}
I believe I was able to achieve your goal like this:
img {
max-width: 100%;
max-height: inherit;
}
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 have
.postImg {
text-align: center;
}
.postImg img {
max-width: 100%;
}
Which on Chrome downscales images when the window is downscaled, but does not upscale the image past it's width. Which I the desired behaviour.
But on Firefox the images don't get downscaled and stay the same size.
Putting width: 100%; in there ensures the Firefox downscaling, but upscales all smaller images, which is what I don't want.
I must have missed something basic here. And I do not know the size of the image beforehand.
Found it, grand parent of the .postLeft had
display: inline-block;
*display: inline;
Which actually did nothing just broke the images.
On my current project I am in the process of building tablet and mobile versions of the site and am testing it within the browser at the different sizes, though I am coming across a problem when resizing the browser.
The current version of the site can be found at: http://beta.residencyradio.com
Basically whenever I resize the browser to check how it will look on the tablet for example, white space is rendered to the right and the x scrollbar appears, even though the width of the containing element has not been exceeded.
I can pretty much solve the issue by adding overflow: hidden but this disables x scrolling completely, which I don't want.
I have tested this across all major browsers, all respond the same, so it must be to do with the CSS, what exactly I'm not too sure, but it's probably something very simple that I've managed to miss.
Any help would be greatly appreciated!
Thanks in advance, Michael
That whitespace is being created because your #second div is being pushed outside the boundaries of the viewport. Instead of pushing that div using margin-left, use position:absolute; in its place to fix that issue.
This is how it is now:
#second .content {
margin-left: 22.8125em;
}
The .content div has a width of 60em as it is.
You can use something like this instead and it should work fine:
#second .content {
left: 170px; /* adjust to your liking */
position: absolute;
width: auto;
}
I think....
change in your css file:
from:
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
}
to
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
background-size:100% 100%;
}
It looks like that image (with the cool gradient) isn't stretching horizontally when the page is zoomed out
Is this it?
I did the following:
html, body {
width: 100%;
display: table;
}
And it removed the weird whitespacing while also allowing to scroll in the x-direction.
I usually fix it with
html {
overflow-x:hidden;
}
It should work and hide the white space and rescale the site
Tried
html {
overflow-x:hidden;
}
didn't work. But..
body {
overflow-x:hidden;
}
Did.
Hi all
I have 3 divs with rollover images inside them stacked vertically inside my main content div. IE7 is chopping off about three quarters of the bottom div and I can't figure out why. It displays perfectly in all other browsers (even IE6) but IE7 just won't display properly.
This is my first website so I still have a lot to learn. I've managed to fix the other IE bugs but just can't figure this one out. Any help appreciated!
.main_content {
float: left;
width: 816px;
background-image: url(Images/evokedesign_bg_tile.png);
background-repeat: repeat-y;
overflow: hidden;
}
.portfolio_buttons {
float: left;
width: 634px;
}
Site link: http://evokedesignstudio.com.au/Portfolio.html
Now you posted a link to your live site, I found the answer very quickly:
On .gallery, remove the height: 400px rule.
Done.
This fixes IE7, and nothing changes in IE8/other browsers.
You have got your .page_container set to a fixed height of 730px.
Try updating the CSS to
.page_container {
padding: 0px;
min-height: 730px;
height:730px;
}
Same with the .gallery as #thirtydot said. Either remove the height all together or update it to min-height and height below (see above example).
By placing the height below the min-height in your stylesheet, any browser that doesn't recognise the min-height tag (IE6) will then register the height below it as a backup.