If I have a group of pictures, how can I get the browser to wrap them as a single image? For example images a.jpg,b.jpg,c.jpg stay in a group d.jpg,e.jpg,f.jpg,g.jpg stay in a group, etc. So that if a.jpg is on one line then c.jpg is also on that line and not wrapped to the next line?
Try the white-space CSS property:
.nowrap {
white-space: nowrap;
}
<div class='nowrap'>
<img src='http://lorempizza.com/200/200' />
<img src='http://lorempizza.com/200/200' />
<img src='http://lorempizza.com/200/200' />
<img src='http://lorempizza.com/200/200' />
<img src='http://lorempizza.com/200/200' />
</div>
<div class='nowrap'>
<img src='http://lorempizza.com/250/200' />
<img src='http://lorempizza.com/250/200' />
<img src='http://lorempizza.com/250/200' />
<img src='http://lorempizza.com/250/200' />
<img src='http://lorempizza.com/250/200' />
</div>
Related
I want my layers to follow the scroll when I see the components containing those layers.
I see in rellaxjs there is a wrapper and I use it but when I look at the element ,I see that translate3d doesn't change and is always transform: translate3d(0px, 0px, 0px) translate3d(0px, 0px, 0px);
i have wrapped the layers i need in the wrapper class i want but its not working. below is my code
if i don't use wrapper, my layers will take the menu bar or top:0 as the root. I only want it will take components containing those layers as a root.
<Row>
<Col className={`${styles.bottomDiscover}`}>
<div className={`${styles.wrapper} check`}>
<div className={`${styles.laptop} rellax`} data-rellax-speed="2">
<Image
alt=""
src={'/images/macbook.png'}
width={887.46}
height={524.55}
objectFit="contain"
/>
</div>
<div className={`${styles.cal} rellax`} data-rellax-speed="2">
<Image
alt=""
src={'/images/cal.png'}
width={350}
height={300}
objectFit="contain"
/>
<div className={styles.calArrow}>
<img src="/images/arrowleft.svg" alt="" className={styles.imgCalArrowLeft} />
<img
src="/images/arrowright.svg"
alt=""
className={styles.imgCalArrowLeftMobile}
/>
</div>
</div>
<div className={`${styles.sel} rellax`} data-rellax-speed="2">
<Image
alt=""
src={'/images/sel.png'}
width={350}
height={300}
objectFit="contain"
/>
</div>
<div className={`${styles.stock} rellax`} data-rellax-speed="2">
<Image
alt=""
src={'/images/stock.png'}
width={300}
height={200}
objectFit="contain"
/>
</div>
<div className={`${styles.phone} rellax`} data-rellax-speed="2">
<Image
alt=""
src={'/images/iphone.png'}
width={250}
height={500}
objectFit="contain"
/>
<div className={styles.calArrow}>
<img src="/images/Component 2.svg" alt="" className={styles.imgCalArrowRight} />
<img
src="/images/Component 4.svg"
alt=""
className={styles.imgCalArrowRightMobile}
/>
</div>
</div>
</div>
</Col>
</Row>
useEffect(() => {
new Rellax('.rellax', {
wrapper: '.check',
});
}, []);
I have this grid of images. I want no spacing in between. Also the width should be 100% of parent. Each column same size, in this case 20%. The flex takes care of that. However I want the height to main aspect ratio, but that is where the problem is. The height of the images stays constant as I zoom in and out (or resize window). It needs to be same aspect ratio as the current width of the image.
Does anyone know how to fix this?
HTML
<div class="image-grid-container">
<div class="image-grid">
<img src="images/me/img01.png" />
<img src="images/me/img02.png" />
<img src="images/me/img03.png" />
<img src="images/me/img04.png" />
<img src="images/me/img05.png" />
</div>
<div class="image-grid">
<img src="images/me/img06.png" />
<img src="images/me/img07.png" />
<img src="images/me/img08.png" />
<img src="images/me/img09.png" />
<img src="images/me/img10.png" />
</div>
<div class="image-grid">
<img src="images/me/img11.png" />
<img src="images/me/img12.png" />
<img src="images/me/img13.png" />
<img src="images/me/img14.png" />
<img src="images/me/img15.png" />
</div>
</div>
CSS
.image-grid-container .image-grid {
display:flex;
}
.image-grid-container .image-grid img {
width:100%;
}
You should set each image inside div.
Something like this:
<div class="img">
<img src="http://placehold.it/200x200" />
</div>
And then in CSS
.image-grid-container .image-grid .img img {
width: 100%;
}
Full example here: https://jsfiddle.net/cvru2yL5/
Having this html:
<div class="images_portfolio panel-widget-style">
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
<img src="x.jpg" alt="" />
</div>
and this css:
.images_portfolio.panel-widget-style a img {
width:100%;
height:auto;
}
.images_portfolio.panel-widget-style a {
position:relative;
display:block;width:32%;margin-right:1%;
float:left;
margin-bottom:1%;
}
it
I can get 32%+32%+32% = 96% + margin right (1%*3) = 99% in total of parent element.
How can i get 100% of parent element so it works in all major browsers? Number of links can vary so I never know if it's 5 or 18 etc... (I want the the images to be aligned to an element down below that is 100%. Hope you understand what I mean).
Try using width: 33,33333333% and instead of margin-right use padding-right. Padding is offset inside the element that counts towards elements width.
You can achieve it with javascript for example
https://jsfiddle.net/fx1azr4q/
(function() {
var elements = document.getElementsByTagName('a');
[].forEach.call(elements, function (el) {
el.style.width = (100-elements.length)/elements.length + '%';
});
})();
I am going to arrange images
This is html code
<div class="imagearea">
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
</div>
css code
<style>
.imagearea{
width:100%;
position:absolute;
}
.subimg{
width:200px;
height:auto;
float:left;
}
</style>
I am going to arrange images
When the images change the line, sub images of next line is arranged to image (that the height is the smallest ) of top image.
you can check it in http://jsbin.com/ezoyag/1/edit
But if I have set the height style of subimg class statis size (ex height:200px) and then I can see the good result.
And I'd like to set the height style auto.
For it I have to use only html and css
From what i understand, you want the images to not have a fixed height, but you want every line to be aligned to the highest image.
To do that you need to add a wrapper div around each image group:
<div class="imagearea">
<div class="row">
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
</div>
<div class="row">
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
</div>
...
</div>
And add to the css:
.row{
float: left;
width: 100%;
}
See this fiddle
Update
when setting the height to auto, you are telling the image to scale the height according to width, so it will maintain aspect ratio, the browser controls it, and the image might appear shorter than you expect.
You can try using max-width:100% and remove the height instead, look here: http://jsfiddle.net/Kuy48/1/ , there is not other way that i can think of, to do what you want unless you set a fixed height
I have had a good start at geting my codeded table turned over from a table to Div setup but some where in this part right here it seems to be having a problem. This is what the site should look like: http://db.tt/YeUZiiBy.
Here is the code and CSS Link: http://jsfiddle.net/8WKR9/1/.
Here is my HTML `
<div id="container">
<article>
<div class="item">
<img src="4-cute-cats.jpg" class="centerImage" width="300" height="300"
/>
<p class="centerText">They hunt in packs.</p>
</div>
<div class="item">
<img src="cat_sniping.jpg" class="centerImage" width="256" height="192"
/>
<p class="centerText">Sniper Cat</p>
</a>
</div>
<div class="item">
<img src="LOL1.jpg" class="centerImage" width="300" height="298" />
<p class="centerText">Sneaking Cat</p>
</div>
<div class="item">
<img src="hammercat.jpg" class="centerImage" width="300" height="163"
/>
<p class="centerText">80s Cat</p>
</div>
</article>
<article>
<div class="item">
<img src="kittytrap.jpg" class="centerImage" width="200" height=492 />
<p class="centerText">It's a trap!</p>
</div>
<div class="item">
<img src="chop-cats.jpg" class="centerImage" width="300" height="140"
/>
<p class="centerText">They can strip a car to the frame in under 2:00 minutes.</p>
</div>
<div class="item">
<img src="smartkat.jpg" class="centerImage" width="200" height="338" />
<p class="centerText">Intelligent cat.</p>
</a>
</div>
<div class="item">
<img src="narniacat.jpg" class="centerImage" width="200" height="337"
/>
<p class="centerText">Once a cat of Narnia always a cat of Narnia.</p>
</div>
</article>
<article>
<div class="item">
<img src="lolcats3.jpg" class="centerImage" width="300" height="108" />
<p class="centerText">Tired cat.</p>
</div>
<div class="item">
<img src="lol_cats_1.jpg" class="centerImage" width="300" height="142"
/>
<p class="centerText">Gollum Cat.</p>
</div>
<div class="item">
<img src="Magical-Kitty.png" class="centerImage" width="300" height="180"
/>
<p class="centerText">Super Cat.</p>
</div>
<div class="item">
<img src="sad-kitty.jpg" class="centerImage" width="300" height="188"
/>
<p class="centerText">Sad Kitty.</p>
</div>
</article>
<article>
<div class="item">
<img src="cat-in-your-wallpaper.jpg" class="centerImage" width="300" height="200"
/>
<p class="centerText">Wallpaper cat.</div>
<div class="item">
<img src="thinking-cat.jpg" class="centerImage" width="300" height="475"
/>
<p class="centerText">Thinking cat.</p>
</div>
<div class="item">
<img src="http://3.bp.blogspot.com/_znuneBeHigk/TSOOr5DuoQI/AAAAAAAABFY/-Rpe8S1uRo8/s1600/000.jpg&w=823&h=618&ei=_A4VUfP7L4Gy2QXJ-oHIDQ&zoom=1&ved=1t:3588,r:79,s:0,i:354&iact=rc&dur=2621&sig=108293906633680688065&page=3&tbnh=172&tbnw=231&start=67&ndsp=38&tx=64&ty=72"
class="centerImage" width="300" height="225" />
<p class="centerText">Gamer Kitty.</p>
</div>
<div class="item">
<img src="http://www.dumpaday.com/wp-content/uploads/2013/01/funny-lol-cats-playing-with-toilet-paper1.jpg"
class="centerImage" width="300" height="504" />
<p class="centerText">Couch cat.</p>
</div>
</article>
</article>
<article>
<div class="item"> More Kitties
</div>
</article>
</div>`
I think you had the right idea with the mark up but needed some work on the CSS side of things. The key is to clear your floats or else it the item will go to the next available place. I suggest doing a bit more reading on floating and how they effect block elements and the parent element.
I've done a quick 'bare bones' example for you that you should be able to adapt.
http://jsfiddle.net/ZbfXU/2/
<html></html>
Try setup height in tag img
.item > img {
width: 100%;
height: 100%;
}
you could use max-width and/or max-height on your img tags to make sure they keep ratio instead of transforming.
Go through your code and tidy it up, you've got the right idea of separating into rows then using divs within each row.
Here's one I very quickly mocked up, http://jsfiddle.net/8WKR9/5/ 1st and 3rd height are the same and 2nd and 4th are the same, i'm not getting any display errors so probably best going through your HTML & CSS and tidying it up, that way you can see what each part is doing and work out where it's going wrong, rather than try and find a quick fix, it'll also make your code cleaner and easier to read.
<html></html>