I have below code where I am trying to change the height and width of an image. For that, I gave height and width parameters in <img > tag.
Height of an image is being changed where as there is no affect on width. I want my image to be larger.
<div style="text-align: center; margin-top: 10px; width: 1000px; height:100px">
<img class="calIcons" src="#calLegend" alt="Legend" height="1000" width="100"/>
</div>
Image:
Dimensions 443x30
Width 443 pixels
Height 30 pixels
Bit depth 32
Make sure that the class calIcons does not manipulate the width or size.
Make width and height of image tag 100% and then adjust the width and height of the container div to whichever values you want. This works if the image is the only element in the div.
Instead of using the height and width attributes, to keep it clean you can try something like the following within your CSS file:
div > img{
width: 100%;
height: 100%;
}
Considering you have already set your dimension values within the parent div, you can just set the width and height to 100% for the child img.
Alternatively, if you don't want the image to stretch;
You can set it as the background-image of a div with a background-size of cover.
Like so (HTML):
<div class="parent-div"> <!-- the parent div with the set dimensions !-->
<div class="child-img"></div> <!-- the image !-->
</div>
CSS:
.parent-div{
width: 1000px;
height: 100px;
text-align: center;
margin-top: 10px;
}
.child-img{
width: 100%; /* set the dimensions to 1000px x 100px */
height: 100%;
background: no-repeat url('image/location.jpg');
background-size: cover; /* cover the whole div */
}
Replace your code with this. It will give you maximum dimensions of your image.
<div style="text-align: center; margin-top: 10px; width: 1000px; height:100px">
<img class="calIcons" src="#calLegend" alt="Legend" style= "width: 100%; height:100%"/>
</div>
Related
I would like to create a gallery wall like this image.
Most tutorials I can find on the matter either use grid (which either requires me predefining grid-areas for each image, or have a fixed width and height for each image) or flexbox (which I am trying to get working now).
The critical parts is that the images are displayed left-to-right from the source, and I want the gallery to be generated dynamically due to the images I provide it, so images of different aspect ratios, I want to lock the height of each row to say 200px and have the images keep their aspect ratios but resize to the appropriate height. This is easy if the images were to be vertically stacked, as I could use columns or width: 200px, height: auto, but the other way around doesn't seem to work (width: auto, height: 200px).
Anyway here is my current html:
{images.map((image, index) => {
<div class="gallery">
<div class="pic>
<div class="gatsbyPic">
<picture>
<img src={image.src} />
<picture>
</div>
</div>
</div>
}
I am using Gatsby hence the strange layout, here is how it looks like in Gatsby
<div className={style.gallery}>
{imageData.map((item, index) => {
return (
<div key={`${item.name}_{index}`} className={style.pic} onClick={() => onImgSelected(index)}>
<Img className={style.gatsbyPic} fluid={item.original} />
</div>
)
})}
</div>
</div>
And CSS
.gallery {
display: flex;
width: 1000px;
flex-wrap: wrap;
}
.gallery .pic {
flex: 1;
width: auto;
height: 200px;
min-width: 300px;
object-fit: cover;
}
.gatsbyPic {
height: 100%;
width: 100%;
}
/* AUTOMATICALLY generated by Gatsby */
.gatsbyPic img {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
object-fit: contain;
object-position: center center;
}
This is the result
As you can see, the portrait of the woman is scaled appropriately but it's grandparent container, .pic, is still covering the entire width because min-width: 300px is set. But without the min width, all my pics resize to be very narrow to fit in one line for the flex container, and then you can barely make out any of the images!
How can I get the desired result?
I'm trying to display an image (6000px width, 300px height) at the end of the main-content like background image. The image should fit the width of the screen, but keep the origin height.
In other words somehow always crop the image at the center while the width of the x-crop is the screen width size and height crop is the origin height of the image.
I have made the image with 6000px width so that I can fit all the screens.
the code below does not work as expected its obvious, it just display the original img while scaling the height to keep the aspect ratio relative to the screen width.
newnewwaves.svg : http://svgshare.com/i/3DT.svg
how I want to be displayed: https://ibb.co/e80Ddw
HTML:
<div class="main-content">
...content
<div id="header-waves">
<img src="/assets/images/newnewwaves.svg" alt="">
</div>
</div>
CSS:
.main-content {
position: relative;
}
#header-waves {
position: absolute;
left: 0;
bottom: 0;
}
#header-waves img {
width: 100%;
height: auto;
display: block;
}
Try this:
.img-class {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
object-fit: cover;
}
This will help in maintaining aspect ration by restricting the width and cropping the image to center it.
If that doesn't work, Please try this :
.img-class {
width: 100%;
height: 400px; /* Set your fixed Limit */
background-size: cover;
}
You could place the image in a container with width: 100% and set the overflow property to hidden.
Use flexbox to center the image within this container.
Note that this snippet is easier to test if you make it full screen and resize the browser...
#header-waves {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
}
<div class="main-content">
<div id="header-waves">
<img src="https://placehold.it/6000x300" alt="">
</div>
</div>
You can do it using background: url(...), like the example..
.main-content
{
background: url('http://via.placeholder.com/6000x300');
background-size: auto 100%;
width:100%;
height:300px;
}
<div class="main-content">
...content
</div>
I have an <img> which is positioned absolutely within a <div>. The <div> is 100px by 100px.
The <img>, when clicked, should grow to a known max width or height, say 500px by 700px. If the <img> is smaller, say 300px by 250px, then that's as large as it should get. Aspect ratio should be maintained.
Setting height and width to 100% just makes the <img> the size of the containing <div>.
I'm looking for either a css or vanilla javascript solution. (I don't require the code for a click animation, just a static end result so I can apply the concept)
Set the max-width of the image as 100%.
Height should be set to auto.
Solution 1 : When the image can grow up to its parent div's width:
.wrapper {
width: 500px;
height: 500px;
border: 1px solid red;
position: absolute;
}
.wrapper img {
/*width:100%;*/
height: auto;
max-width: 100%;
}
<div class="wrapper">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
Solution 2 : Initially the image width will be restricted by the max-width property to stay within the thumbnail size.
Onclick of image, remove the thumbnail class, so that it naturally over flows the parent to its original size
.wrapper {
width: 100px;
height: 100px;
border: 1px solid red;
/*position: absolute;*/
}
.wrapper img.thumbnail {
/*width:100%;*/
height: auto;
max-width: 100%;
}
<div class="wrapper">
Initially
<img class="thumbnail" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div class="wrapper">
On click
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
I need to have image inside div element which has width of 500px. But I need that this image is set to full width of screen. That means:
<div style='width:500px'>Some text <img full width of screen /> some other text </div>
But I need that image size is for full width of screen. That means that I don't need to have image only for 500px I need that this image is resizable of screen width. This img must be inside this div element. Thank you
Just set the position of your image to fixed,
the width and the height to 100%
and the top and left to 0.
It will then be fullscreen in your browser.
img{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
In your example:
<div style='width:500px'>Some text
<img style="background: red; width: 100%;height: 100%; position: fixed;
left: 0;top:0" full width of screen />
some other text
</div>
How can I make an image 100% of a div ?
I have a 300x300 image and I want to make it the full size of a bigger div. (the size of this div can change, so I have to specify somewhere 100% of it)
Is there a solution in CSS or Javascript ?
try this:
<img src="test.jpg" alt="test" id="bg" />
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
css3 also supports this:
#testbg{
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
Just assign the CSS style width: 100% in the image tag to have it cover the whole space of its parent container.
Example or jsFiddle:
<div style="width: 500px;">
<img src="yourPic.png" style="width: 100%" />
</div>
<div style="width:450px;height:450px;">
<img src="photo.png" style="width:100%;height:100%;"/>
</div>
Try this: http://jsfiddle.net/XUZV5/
<div style="height:100px;width:300px;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Mars-Schiaparelli.jpg/280px-Mars-Schiaparelli.jpg" style="width:100%;height:100px;"/>
</div>
The CSS below will scale your image and fill 100% of the width of your div
#imgId {
width: 100%;
height: auto;
}
However if you actually want to fill the entire div by stretching the image use
#imgId {
width: 100%;
height: 100%;
}
One other useful tip is when your width is specified as a percentage and your image is square, as yours is.
HTML
<div class="container">
<img src="sample.jpg">
<div style="clear:both;"></div>
</div>
CSS
.container {
position: relative;
width: 50%;
height: 0;
// % padding is calculated as % of width rather than height
// so height will equal 50%
padding-bottom: 50%;
}
img {
position: relative;
width: 100%;
// image is square so as long as width is 100% then height will be the same.
height: auto;
}
html, body {
height: 100%;
width: 100%;
}
The above means the image will always resize to fit the parent div exactly.
Fiddle here