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?
Related
I currently have an image that I am giving 100% width. The issue I am noticing is that while the image loads, the content below jumps up to where the image sits while it loads. I know I need to give the image some sort of fixed height, but I want the image to remain responsive. The desired effect: The image looks exactly as it does when applying 100% width and prevents the content below from jumping while the image loads. Please advise on this. My code is as follows:
<img src={"https://storage.googleapis.com/youfit-assets/239315_66400_YouFit_JUL21_Mil_Website_1680x761_CarInitial.jpg"}
alt="travel"
className="image"/>
Styles:
.image {
position: relative;
width: 100%;
height: auto;
max-height: 100%;
}
In order to duplicate what I am seeing test on an incognito browser with the following link https://codesandbox.io/s/gifted-montalcini-ohts8?file=/src/App.js
Wrap your img tag into div, so it should look like:
<div className="image-wrapper">
<img src={...} alt="travel" className="image"/>
</div>
<div style={{ marginTop: 60 }}>TEXT BELOW</div>
then replace your style for image with this style (if your aspect ratio is 4:3):
.image-wrapper {
position: relative;
padding-bottom: 37.5%;
}
.image {
position: absolute;
width: 100%;
}
or if your aspect ratio is 16:9
.image-wrapper {
position: relative;
padding-bottom: 56.25%;
}
.image {
position: absolute;
width: 100%;
}
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 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>
I have a formation of images, as seen here:
The following is the HTML. "second-panel" is the main wrapper, which has the background image of the building. Each "diamond"-shaped image is positioned absolutely, using CSS, with pixel values.
<!-- Second panel -->
<div id="second-panel" class="parallax-wrapper">
<div id="second-panel-diamonds">
<img class="second-panel-diamond" src="images/furniture-min.png" alt="Furniture" />
<img class="second-panel-diamond" src="images/automobile-min.png" alt="Automobile" />
<img class="second-panel-diamond" src="images/jewelry-min.png" alt="Jewelry" />
<img class="second-panel-diamond" src="images/antique-min.png" alt="Antique" />
</div>
<div class="parallax-panel">
...(not relevant)...
</div>
</div>
CSS:
#second-panel-diamonds{
position: absolute;
left: 1%;
top: -5px;
}
#second-panel .second-panel-diamond{
position: absolute;
/* width: 22%; */
width: auto;
height: auto;
max-width: 350px;
}
.second-panel-diamond:first-child{
top: 250px;
left: 90px;
}
.second-panel-diamond:nth-child(2){
top: 80px;
left: 260px;
}
.second-panel-diamond:last-child{
left: 337px;
top: 337px;
}
The problem is when it comes to smaller screen sizes, as the images will obviously start to overflow, since they are given a fixed width and height. I tried setting them to a percentage width and height auto, but then of course they break formation as they get smaller. I tried setting their positions using percentage values as well, but it does not scale properly, according to the resizing of the images AND the resizing of the window.
Is there any way to maintain this formation while scaling the images down, or will I have to just redesign it for smaller screens?
Yes, using CSS #media queries. You just need to decrease the size of the images display (you'd have to not use auto, if needed, calc(auto - px)) for specific screen sizes (don't forget to change each image position later):
#media screen and (max-width: 600px) {
#second-panel .second-panel-diamond {
position: absolute;
width: 50px;
height: auto;
}
}
#media screen and (min-width: 601px) {
#second-panel .second-panel-diamond {
position: absolute;
width: 100px;
height: auto;
}
}
The easiest way to solve the problem would be to merge all images into one PNG graphic and then to set its width and height as percentage values. Do you need the images to be separate?
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>