Before I posting this question I have checked this forum and google but the methods is not working for me. May be I am doing wrong.
I have a page which is look like this :
enter image description here
In this page I have few images and for that I am using following css code:
display: inline-block;
width: 100% \9;
max-width: 100%;
min-height: 75px;
height: auto !important;
height: 75px;
Now in Firefox browser both top and bottom images are showing correct size but in internet explorer all images are showing full height ( filled up entire website)!!
Now If I remove this line
height: auto !important;
then on internet explorer image height is perfect but on Firefox bottom images are stretch.
How can I solved this problem ?
Thanks.
please try this.
{
display: inline-block;
max-height: 75px;
min-height: 75px;
width: auto;
}
About your all image height will be 75px but width may be not same for all and if you want image also same then please use below.
{
display: inline-block;
max-height: 75px;
min-height: 75px;
width: 100%;
}
If all images have same width then there will no issue but if width are not same for all images then may be some images will be stretch.
Related
I create my first web site and I can’t understand how correct responsive my big image in terms flex and overflow hide display for sliding image one by one
This how look my tries to response
img{
width: 100%;
height: auto;
padding: 1px;
}
.doorsSlide{
width: auto;
display: flex;
height: 430px;
}
.doorsSlide.large{
height: 100%;
}
.doorsSlide.small{
height: 100%;
}
I want to help, however I don't have enough information to understand the problem.
Based on the code you entered for img that should adjust with different screen resolutions.
I have a problem with the height of images in the "products" part of my website www.takchinsaffron.com. The height isn't set in iOS. It hasn't any bug on other devices.
.grid figure{
max-width: 100%;
margin-top: 20px;
}
My parent had display: flex so I had to put align-self: flex-start on the image.
image {
max-width: 100%;
height: auto;
align-self: flex-start;
}
Change min-height: 100% to min-height: auto and all works fine.
Check that CSS does not set the height of the image to 100%.
If height is auto and width is some value, image maintains its aspect ratio.
And if you have, for example, a width of 50 pixels, height will be 50 pixels.
On iOS, images with height of 100% become height of device (I don't know why).
For me, using only width: inherit on the image element resolved the issue.
For reference, my parent has the following properties:
display: flex;
flex-direction: column;
width: 9vh;
height: 9vh;
I had the same problem. My solution was to add:
width: 100%;
height: 100%;
min-width: 100%;
I want the image to fill the height of its container and then use object-fit: cover to take care of the aspect ratio. In Chrome this achieves the desired effect. However, in Safari the containing divs are now very tall.
http://codepen.io/anon/pen/GjzPvN
Why is there a discrepancy between Chrome and Safari? Which one is correct and if Safari is correct, is there a better way to achieve this, preferably without using position: absolute?
Safari does it correctly, because of the wrong support for min-height by Chrome.
If you need consistency, you must use vh, this way:
img {
width: 100%;
min-height: 100vh;
object-fit: cover;
}
I wouldn't use object-fit: to do what you need because of its browser support
For the best browser support, you could use instead of an image, a background-image like this:
.row
.medium-8.columns
a.link#image-1 href="" # I use and id to manage the background image but you could use a class or even inline style (not suggested)
.medium-4.columns
a.link#image-2 href=""
And your css:
/* I fix the container height to fit the 100% of the page */
html, body, .row, .row > div {
height: 100%;
}
/* If you want a fixed height you could add it here and remove the style above. */
[id^="image-"] {
background-size: cover; /* This could be "cover" or "100% 100%"
The difference is that the second distor the image to make it fit.*/
background-position: center;
}
#image-2 { background-image: url(http://placehold.it/300x150); }
#image-1 { background-image: url(http://placehold.it/400x300); }
Here is my CodePen example.
Please notice that If you want to get exactlye the same result as your CodePen, you should change background-size to 100% 100% but if you want the image to maintain it's aspect ratio you should consider using cover or contain. Read more about the differences between cover and contain here
It seems Chrome calculates the row height according to the highest image. Safari does not calculate the row height according to the images.
Even if you set a fixed column height, the behavior of Safari 9.x and Chrome is not the same. The left img is showing outside its container in Safari. To make the browser behave the same, I had to set a height and make overflow-y hidden.
Example:
.columns {
padding-left: .9375rem;
padding-right: .9375rem;
min-width: initial;
background: blue;
height: 405 px;
overflow-y: hidden;
}
Instead of overflow hidden. You can try:
.columns {
padding-left: .9375rem;
padding-right: .9375rem;
min-width: initial;
background: blue;
height: 405px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
Maybe you can set the height of the columns according to the highest of the two images using some jQuery. Or set the height using #media rules.
Microsoft browsers does not support object-fit: - Including IE11 and EDGE. For browsers not supporting object-fit:, you can try object-fit-polyfill
If anyone is having this issue with a variable height wrapper and Safari this seemed to work for me:
.imgContainer {
width: 50%;
max-height: 100%; // for safari
}
.imgContainer > img {
object-fit: cover;
min-height: 100%; // for safari
}
I was creating the about section of my site and was placing an image besides some text and now when i shrink the screen size the image for some reason is not taking up the full height of the containing <div>.. please check the fiddle and help me understand the reason for this.
The borders will show you the gap at the bottom which I don't want to show..
Please note that I do have bootstrap wired in as well for the project but I am not using it for this section.
Thanking all of you in anticipation
You've got min-width and max-width set on the images's parent, as follows:
.about-content {
box-sizing: border-box;
min-width: 200px;
max-width: calc(50% - 2em);
}
Remove the min / max width properties and it works (note, I've added a media query in the CSS as per below): https://jsfiddle.net/m9j61oua/7/
Although pretty pointless as I don't know any devices that go that small, you could wrap it in a media query :
#media (min-width: 201px) {
.about-content {
min-width: 200px;
max-width: calc(50% - 2em);
}
}
EDIT - Further to comments below, I think the only way forward for you is to use a background-image on the second div, here's a fiddle: https://jsfiddle.net/m9j61oua/14/
Relevant CSS:
.about-content.bg-image {
background-image: url(http://assets.worldwildlife.org/photos/1620/images/carousel_small/bengal-tiger-why-matter_7341043.jpg?1345548942);
background-size: cover;
min-height: 200px;
}
I've appended the class bg-image to your second div and removed the image element within it.
As you can see, it's not a perfect solution to what you're looking for, but with the right image and some media queries, you should be able to crack it.
The image isn't any higher. If you give it height: auto, it keeps its proportions, which usually is desired.
If you would set it to height:100%, it would be distorted, or (if you then set width to "auto") cut off a the sides.
One possibility would be to define the image as background image for its container and use background-size: cover; background-position: center; Background-repeat: no-repeat; on it. But this will cut off some parts of the image.
If you use background-size: contain;instead, you get the full image again, but with some space on either the sides or top and bottom.
img tag is inline-block by default, so you need something like this:
.about-content img {
display: block; /* remove extra space below image */
max-width: 100%;
height: 100%;
}
You have defined such style
.about-content img {
max-width: 100%;
height: auto;
}
which force browser to keep image aspect ratio.
Use image with correct aspect ratio or change style of img element.
There is a little change on line #14 in css. change max-width: 100%; to max-width: auto; height:auto to height:100% &
And Here is your code Make changes in your css and it will work. :
.about-content-wrapper {
margin: 2em 0 5em;
display: flex;
flex-wrap: wrap;
padding: 0 1em;
border:1px solid #ccc;
}
.about-content {
box-sizing: border-box;
min-width: 200px;
max-width: calc(50% - 2em);
}
.about-content img {
max-width: none;
height: 100%;
}
.about-content h2,
.about-content p {
margin: 0 1em 0 1em;
}
I've been making a tumblr theme using html/css and it allows the user to input their own image that will show up in their sidebar on the theme.
I'm not sure how to constrain the image to a certain region/size on the screen. What I have right now for the css of the image (which is probably excessive)
.sidebaricon {
margin-left: auto;
margin-right: auto;
width: auto;
height: auto;
max-width: 500px;
max-height: 500px;
}
But when I upload differently sized photos they don't constrain to the same size. I want all the uploaded images to constrain to a 500x500px square region.
Please help! Thank you.
As far as I understand, you try to upload an image and set it a max width. There's some mistakes in your code and some things that can be confusing (e.g. : your sidebar and its image have the same class).
First you need to set a width to your sidebar:
.sidebar { /* I renamed the container to avoid any misunderstanding */
width: 30%; /* or whatever */
max-width: 500px;
}
Then, the image in the sidebar :
.sidebar .sidebaricon { /* this should be your img */
max-width: 100%;
height: auto;
}
The logic is quite simple : you let the image to fill 100% of its parent's width, so you just have to play with the parent's width.
A lot of CSS frameworks use the same technic to provide a quick way to make all images "responsive", like this :
img {
max-width: 100%;
height: auto;
}
Again, this means : all images in the document body should have a maximum width of 100% of its container. I added the automatic height as some old IE doesn't keep the ratio by default.