Working on a Drupal website where different sized images can be added to any single node.
I have the following css to resize images to manageable sizes:
img {
width: 100%;
height: auto;
}
But that obviously applies to all images regardless of their width or height.
Is there a way to apply media-queries or some other strategy to filter images over a certain width or heigh and apply the styling above to them ?
It sounds as though you want to limit the size of img whatever the media, viewport, dimensions are so I don’t think media queries will help you.
But you can limit width and height so imgs will take on their natural width and height if they fit, otherwise they will go up to but not beyond the viewport size.
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
Related
I am quite new to web dev and am currently learning HTML and CSS.
I want to create a portfolio page inside my website, and used for this matter a 3-column CSS Grid, which I would like to fit to page width and be centered. I managed to display the pictures as I want, with margins and all but I am stuck on one problem : my images are too big, which results in the CSS Grid being too big and diplaying outside the page. Images are all 1000x1000 px.
I want my CSS Grid to resize itself to fit to page width, while keeping its aspect. How do I achieve this ?
Here is the code for my CSS grid (named artworkGrid) :
.artworkGrid {
display: inline-grid;
float:left;
clear:left;
grid-gap: 5%;
margin: 5%;
max-width: 25%;
grid-template-columns: 33% 33% 33%;
}
Using max-width: 25% allowed me to get approximatively the page width, so it works but it's a kind of shady alternative way to do it. Also, it doesn't resize the pictures inside the grid.
I tried to resize the images themselves :
.artwork {
width: auto;
object-fit: cover;
}
but it didn't work.
change
max-width: 25%;
to
max-width: 100vw
that way the maximum width would be 100vw = 100% of the view width (screensize)
I am trying to make an image resizable.
I have a specific height for this image: height: 100% (inside a container) and a width: auto; (i want the width to be adapted to the height about the natural image size).
Everything works fine when i access the page, but when i resize the window, the height is correctly resized, but the width keeps its initial value, i want it to be proportional (like when i access the page for the first time) to the height.
Is there a way to do it in CSS ? If not, what is the more optimize solution ?
Here is an illustration in code:
HTML
<div class="container">
<img alt="test" src="/img/test.png">
</div>
CSS
.container {
height: 100px;
width: 100%;
}
.container img {
height: 100%;
width: auto; //i need it to be adapted to each height about the natural image's dimensions
}
UPDATE
Here is a jsfiddle
http://jsfiddle.net/CRGj6/1/
Sometime it works sometime it doesn't...
window resize affects only the width of the element but not the height. It is kinda make sense because if you resize the height, more content is scrollable that means don't do anything to width but to increase the scrollbar length (so more content to be scrolled). Assuming that you want to preserve the aspect ratio of the image,
.wrapper .container img {
position: relative;
height: auto;
width: 100%;
}
would be the solution to this problem.
My end goal is to have a fluid <img> that won't expand past an explicitly set height of a parent/grandparent element using only css.
Currently I'm doing this with a normal (max-width:100; height:auto;) fluid image and javascript by reading the height/width attributes from the img tag, calculating the aspect ratio, calculating the correct width of the image at the desired height restriction, and applying that width as a max-width on the image's container element. Pretty simple, but I'd love to be able to do it without javascript.
height:100%; width:auto; doesn't work the same as its transverse, and I've made some attempts with Unc Dave's ol' padded box and absolute positioning that function but require knowing the aspect ratio of the image beforehand and therefore cannot be applied across images that have different proportions. So the final requirement is the css must be proportion agnostic.
I know, I know, the answer to this question is probably sitting next to the unicorn farm, but I thought I'd throw it out there anyways.
The trick is to add both max-height: 100%; and max-width: 100%; to .container img. Example CSS:
.container {
width: 300px;
border: dashed blue 1px;
}
.container img {
max-height: 100%;
max-width: 100%;
}
In this way, you can vary the specified width of .container in whatever way you want (200px or 10% for example), and the image will be no larger than its natural dimensions. (You could specify pixels instead of 100% if you didn't want to rely on the natural size of the image.)
Here's the whole fiddle: http://jsfiddle.net/KatieK/Su28P/1/
I set the below 3 styles to my img tag
max-height: 500px;
height: 70%;
width: auto;
What it does that for desktop screen img doesn't grow beyond 500px but for small mobile screens, it will shrink to 70% of the outer container. Works like a charm.
It also works width property.
You can use inline styling to limit the height:
<img src="" class="img-responsive" alt="" style="max-height: 400px;">
What I want to do is setup multiple div's that each contain the contents of an entire page. Each div should be centered in the viewport and fill it entirely. Each successive div should be evenly spaced vertically based on the variable height of the viewport. For example say I have a view of 800x600 then each div should be this size and stacked. So, if I scrolled down exactly 600px I would only see page 2 div, 1200px I'd only see page 3 div. I don't have any code or example to share and my exhausted searches have turned up nothing of this sort. Is this possible with just css?
You simply have to give your html, body & divs a height: 100%;:
html, body {
height: 100%;
}
div {
height: 100%;
margin-bottom: 5px;
}
http://jsfiddle.net/KMMjv/
Because this would vary depending on the size of the user's browser window you would need to JavaScript to detect screen height and position them accordingly. Although you could set the height of each div with just CSS (height: 100%;) you would need to set the top with JS.
Here is a working JSBin: http://jsbin.com/ogokef/edit#preview
Use the following units:
vh for viewport height
vw for viewport width
html, body {
height: 100vh;
}
div {
height: 100vh;
width: 100%; /* you can use 100vw too, but for height it must be vh */
}
So, I am trying to set an image to be 100% of the height and width of the html element (really the browser window is what I'm going for). I have the CSS set as
html{
width: 100%;
height: 100%;
}
img{
width: 100%;
height: 100%;
z-index: 0%;
}
And the width behaves right, but the height does not change. I tried setting it to height: 2% and it stayed the same height. I don't want to use px to set the height because I want this to work on mobile devices, but HEIGHT, Y U NO WORK?
You also need to set height: 100% on body.
Going with your exact example, you could do:
html, body, img {
width: 100%;
height: 100%;
}
However, it looks like you're possibly trying to get a fullscreen background image (because you used z-index - by the way z-index does not use %, just a plain number).
In that case, you should instead use one of the methods from here:
http://css-tricks.com/perfect-full-page-background-image/
That is because the image element is not the direct child of the html element. You have to specify the height for the body element also, and any other element containing the image element.