This may come off as basic, but I'm new to img tags. On this website morningsignout.com, I want to resize the images so that they're smaller. I learned about editing their img tag properties in firebug with "height="40%"", but it doesn't seem to work on any of the article's main images. How do I resize them in html?
I'm presuming that you want to resize the image according to the height of the view window. To do that, you can use the vh unit in css. 100 vh units is the height of the screen that the user is viewing the page on.
Here's an example that sets all the imgs to 40% of the viewport height
img {
height: 40vh;
}
Height with percents it's a little bit tricky because the parent must have height too. You have 2 options: Set the parent's height too. B. Set the height by pixels.
.first {
height: 450px;
}
.first img {
height:50%;
}
.second img {
height:200px;
}
<div class="first">
<img src="http://i.stack.imgur.com/33oYG.jpg" />
</div>
<div class="second">
<img src="http://i.stack.imgur.com/33oYG.jpg" />
</div>
Related
I have some HTML like this:
<div id="wrap">
<p>blah blah ... </p>
<img style="width:100%" src="..." />
<p>blah blah ... </p>
</div>
The image would “flash” before its rendering - because its height is 0 if you don't declare it in the CSS. This is very annoying for my users.
However, I tried something like this:
img {height:calc(width/2)}
or this:
img {height:50%}
It's not working.
I have many pages like this and all the images are in a 2:1 width/height ratio.
Is there anything I can do in Pure CSS to make the image element as big as of the rendered size, so that before its loading, it won't break the page's layout.
By “Pure CSS” I mean, there should not be extra JavaScript or HTML. For instance, the img is the child of div#wrap and I want it remains this way.
Update:
I found another answer suggest me to use calc(100vw * .5). However, this doesn't solve my question. 100vw is a fixed width - the width of the viewport. What I want is something like calc(100 * this(width) * .5).
Thanks
To avoid Cumulative Layout Shift while the image is loading you would need to use a wrapper. I know this is not what you asked for but as far as I am aware there is no other way than to alter the HTML.
The trick is to create a 0 height wrapper with padding the same height as your aspect ratio.
So in the example below I have 3 images with an aspect ratio of 16:9 (or 2:3). As such I create container with the correct padding height using calc(100% * 2/3).
This will then be covered by the image once it loads.
The .container is purely to let you see all the images load in.
It does rely on your knowing the image aspect ratio before it loads.
.container{
width: 15%;
}
.image-wrapper {
width: 100%;
height: 0;
padding-bottom: calc(100% * 2 / 3);
position: relative;
border: 2px solid #333;
}
.image {
width: 100%;
position: absolute;
}
<div class="container">
<div class="image-wrapper">
<img class="image" src="https://placehold.it/3000x2000.jpg" />
</div>
<div class="image-wrapper">
<img class="image" src="https://placehold.it/4500x3000.jpg" />
</div>
<div class="image-wrapper">
<img class="image" src="https://placehold.it/3750x2500.jpg" />
</div>
</div>
Chrome and Firefox
Chrome and Firefox has both introduced native aspect ratio space saving (I do not know the proper name for it as you can probably tell!)
If you give you image a width and height the browser will allocate space for it, even if the image itself is a different size than specified.
please note - you must give the image a width and height of 100% for this to work.
Notice how in the following example the widths and heights I have set are aspect ratio relevant but do not affect the container size. Obviously set these widths and heights to something more sensible in production.
.container{
width: 15%;
}
.image{
border: 2px solid #333;
width: 100%;
height: 100%;
}
<div class="container">
<img class="image" src="https://placehold.it/3000x2000.jpg" width="6" height = "4"/>
<img class="image" src="https://placehold.it/4500x3000.jpg" width="3" height = "2"/>
<img class="image" src="https://placehold.it/3750x2500.jpg" width="3750" height = "2500"/>
</div>
You need to have both attributes, width and height, like:
img {
width: 100%;
height: 50%;
}
Although it will usually work if you only have either width or height, your situation is probably a bit different in that you are using percentages to deal with the image width and height.
Just add a class or id to the image and set it to width:100% and height:100%. Keep in mind that it will always be a 100% of the parent div in this case. Here's a very simple fiddle for you
I've been looking for an answer to this. I'd prefer a solution with just CSS, but I've been unable to find one.
I've got a popup of a fixed width, and it will grow in height if the contents are larger. Inside, I put an image which should take half of the popup while maintaining aspect ratio and being as large as possible without going off the screen, and a div to hold information about the image, which should also be half the screen, so that the image and div are side-by-side. Example here: https://codepen.io/Smarticles101/pen/WdmZLx
I can set a height on the image of 90vh to make it larger and a max-width of 50% to make sure it only takes half of the popup. However, if the window shrinks in width or if I make the fixed width of the popup smaller, the image will maintain height and max-width, thus not maintaining aspect ratio.
How can I make the image maintain aspect ratio while it shrinks in width?
Html:
<div id="popup">
<img src="https://images.freeimages.com/images/large-previews/12d/frangipani-02-1311438.jpg" alt="image" />
<div id="sidedata">
<h1>Image</h1>
<p>Some data about the image here</p>
</div>
</div>
<br />
<div id="popup">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" />
</div>
CSS:
#popup {
max-width: 50%;
background-color: blue;
}
img {
height: 90vh;
max-width: 50%;
/*
The image will not maintain aspect ratio if the max-width is reached, it will maintain height as whatever it was set to originally rather than shrink in height.
*/
display: inline-block;
}
#sidedata {
max-width: 50%;
display: inline-block;
}
short anwser, hope that will help, try with max-height :
img {
max-height: 90vh;
max-width: 50%;
display: inline-block;
}
I am trying to achieve similar effect as is on this page: http://ketrawars.com
When you try to resize a browser window, all images resize along with it. I can get that working if my div contains one image to which I set width 100%. However, I have a problem when I need to put 3 images one next to another.
My code:
<div class="content">
<img src="images/main_01.png" alt="" />
</div>
<div class="content">
<img src="images/main_02.png" alt="" />
<img src="images/main_03.png" alt="" />
<img src="images/main_04.png" alt="" />
</div>
CSS:
.content {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: relative;
top: 0;
left: 0;
}
This is what it does:
And this is what is desired:
With the option to write text on the middle image (second one).
If you have three equally sized images, then set each of their widths to 32%:
.content img {
width:32%;
}
img elements are displayed as inline, by default. This means that the browser will add inline space between them, causing line breaks- you must subtract a percentage or two to compensate for this space.
I recommend displaying the images as blocks and then floating them to remove the inline space.
.content img {
display:block;
margin:0;
padding:0;
float:left;
width:33%;
}
If your images aren't equally sized, simply set their percentages so that all of the elements' widths add to 100.
Another good way to ensure that things will resize with the screen to use viewport units: vw and vh. They're defined as 1/100 the width and height of the viewport, respectively. Only Gecko based browsers will update them dynamically, however.
Codepen
I am trying to resize image using css only.
It is resizing but for some reason it is not stretching to 100% of the browser.What I want is it will resize the image with given height but width should be 100% throughout the browser.
I have created a fiddle as demo so that you can see what's going on.
<div class="resize_image">
<img src="http://www.mrwallpaper.com/wallpapers/sunset-scenery.jpg">
</div>
Full Screen http://jsfiddle.net/squidraj/sbnvwped/embedded/result/
Demo : http://jsfiddle.net/squidraj/sbnvwped/
You can resize it by setting the img tag to 100% width and height and puting it in a container div and resizing that. Demo
<div id="resize">
<img src="http://coolvectors.com/images/vect/2009/07/500x500.jpg" width="100%" height="100%"></div>
#resize{
width:250px;
height:250px;
}
#resize:hover {
width:500px;
height:500px;}
The following code resizes the image proportionally to the width of the page (or more correctly, the container element), but if the height of the image then becomes more than 485px then the width with will be proportional to that. To chop the image, put another div around it with the right width and height, and set overflow to hidden, and remove the max-height from the image itself.
.resize_image img {
display: block;
height: auto;
max-height: 485px;
max-width: 1440px;
width: 100%;
}
Hope this helps.
Try this:
img.resize{
width:540px; /* you can use % */
height: auto;
}
ie changing as one resizes the browswer.
I'm trying to have a logo in the center of the top of my website grow or shrink as the window resizes
yes it's possible if the parent of the image relies on the width of the browser. You can make the width of the image into percentages.
http://jsfiddle.net/SGmRQ/
html:
<div>
<img src="http://www.digitaleconomics.nl/wp-content/uploads/2013/04/see-how-your-google-results-measure-up-with-google-grader-video-6b8bbb4b41.jpg" />
</div>
css:
div {
width: 100%;
}
img {
width: 50%;
}