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%;
Related
I would like for my image to keep its normal width and height without stretching in the full screen browser. How could this be accomplished?
HTML
<!DOCTYPE html>
<img id='mountain' src='img/mountains.jpg'>
CSS
body {
margin: 0;
padding: 0;
}
#mountain{
width: 100%;
height: 600px;
}
#mountain{
width: auto;
height: auto;
}
You can add this attribute.
Try this.Hope it will work.
Good luck
#mountain{
object-fit: contain;
object-position: center;
width: 100%;
height: 600px;
max-height:600px;
}
Your issue is that you are using a combination of absolute sizing units and relative sizing units. Use either pixels OR percentages, but not both together.
If you want the image to stay the same fixed size, use absolute units such as pixels (px), or units based on font size (em or rem), for example:
#mountain{
width: 800px;
height: 600px;
}
If you want it to resize with the screen or its container, but keep the same ratio, use relative units such as percentages (%) or view port sizes (vw and vh), for example:
#mountain{
width: 80%;
height: 60%;
}
Of course, you should base these sizes on your image's aspect ratio and not some arbitrary values.
If you want the image to display with its original height and width, you can choose to not define width and height at all, which has the same effect as setting them to auto, as auto is the default value:
#mountain{
width: auto;
height: auto;
}
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.
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'm making this responsive webpage: http://jsfiddle.net/GeDxr/174/
I need the images in the screen to be seperate, so I put them in a table. Problem is, the table screws up when resizing. Is there any way to keep the 'screen' a neat image, consisting of these different parts?
Current table / images in cell css:
table {
width: 100%;
background-color: #00BF6E;
min-height: 100%;
}
img {
width: auto;
height: auto;
}
Thanks!
You have a min-height on your images. I commented this out for you in the follwing code:
.css-mb .mb-screen img {
width: 100%;
/* min-height: 100%; <-- remove this */
position: center;
}
If you give a min-width and a min-height the images will get distorted because the width-height ratio changes (they both fill 100% of the available space). Using only a min-width makes sure the ratio stays intact.