How can I shrink images to fill screen size? - javascript

I have a website where I have made it so that the 4 pictures will be on the same line like this but on smaller devices one of the pictures goes down a line. Is their a workaround that makes them all on the same line?
This is the html:
<center>
<h1>Meet Our Officers!</h1>
<center>
<div class="main">
<figure>
<img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
<center><figcaption><h2>President</h2></figcaption></center>
</figure>
<figure>
<img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
<center><figcaption><h2>Vice President</h2></figcaption></center>
</figure>
<figure>
<img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
<center><figcaption><h2>Secertary</h2></figcaption></center>
</figure>
<figure>
<img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
<center><figcaption><h2>Treasurer</h2></figcaption></center>
</figure>
</div>

column
.main {
display:flex;
flex-direction: column;
}
line
.main {
display:flex;
}

Yes absolutely! You should set the width of the figures to width: 25%
So with your extracted html I would do:
.main {
display: flex;
}
.main figure {
width: 25%;
}

Related

Flexbox flex-flow alternative for earlier versions of browsers

<template>
<div>
<h2>Kanal Listesi</h2>
<div class="container">
<div v-for="(channel,index) in channels" :key="index">
<div v-if="channel.ChName">
<img
:src="'http://uyanik.tv/conf/images/'+channel.Image"
:class="{selectedIndex:currentIndex === index}"
:ref="index"
/>
</div>
</div>
</div>
</div>
</template>
.container {
display: flex;
flex-flow: row wrap;
/*min-width:1200px;
overflow-x:auto; */
justify-content: center;
}
.container::after {
content: "";
flex: 0 1 32.7%;
}
div > div > div > div > img{
margin: 10px 10px 10px 10px;
height: 100px;
}
div{
text-align: center;
}
My VueJs app has a container which utilizes from flexbox to shift unfitting boxes to the next rows. The issue is that the app will be used in TVs which uses earlier versions of browsers . Thus, I am not able to use flex-flow property as old versions partially supports flexbox. Right now, items overflows to the outer screen. I must display the items like in the output below:
But I get this output in the device :
You can use float or inline-block to get this desired layout, see below example:
div {
width:100%;
padding:0 15px;
}
div img {
float:left;
margin:10px;
}
<div>
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
JSFiddle

My image isn't scaling as I expect inside an image carousel when I change window size

I want my images in an image carousel to scale when I change the size of the window. If I add the following to the CSS,
.carousel-slide img {
display: block;
width: 100%;
}
then for some reason I think the browser is taking the div class="carousel-slide" as the parent of the img instead of the figure, and I get all 4 images displaying in the width of the figure. Or perhaps it is because I am using the CSS Grid? How do I fix this behaviour?
HTML:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<main>
<section id="image-carousel">
<button id="leftButton">
PREV
</button>
<div id="carousel">
<div class="carousel-slide">
<figure>
<img id="lastClone" src="image-4.jpg" alt="">
<br>
<figcaption>
figcap1
</figcaption>
</figure>
<figure>
<img src="image-1.jpg" alt="">
<br>
<figcaption>
figcap2
</figcaption>
</figure>
<figure>
<img src="image-4.jpg" alt="">
<br>
<figcaption>
figcap4
</figcaption>
</figure>
<figure>
<img id="firstClone" src="image-1.jpg" alt="">
<br>
<figcaption>
figcap5
</figcaption>
</figure>
</div>
</div>
<button id="rightButton">
NEXT
</button>
</section>
</main>
</body>
</html>
CSS:
#image-carousel{
display: grid;
grid-template-areas:
". leftButton carousel rightButton .";
grid-template-columns: 0.4fr 0.5fr 60vw 0.5fr 0.4fr;
grid-template-rows: auto;
}
#carousel{
grid-area: carousel;
overflow: hidden;
}
.carousel-slide{
display: flex;
width: 100%;
height: 550px;
}
.carousel-slide img{
z-index: 1;
/*width: 100%; this is treating carousel-slide as parent instead of figure? why?*/
}
.carousel-slide figure{
width: 100%;
}
#leftButton{
grid-area: leftButton;
z-index: 3;
}
#rightButton{
grid-area: rightButton;
z-index: 3;
}
#carousel figcaption{
background-color: rgba(15, 27, 27, 0.7);
text-align: center;
height: 50px;
width: auto;
position: relative;
bottom: 50px;
z-index: 2;
}

Image is stretched when place into carousal

I am using a carousel where I put 5 images with different height and width but there are some issues with images, some images are stretched some images are the center of the carousel.
I want that all images fit inside the carousel.
Here is my code :
<div uib-carousel active="active" class="filter-carousel" interval="false" no-wrap="noWrapSlides" ng-if="vm.temp.length">
<div uib-slide ng-repeat="img in vm.temp" index="$index">
<img ng-src="{{img.src}}" height="650">
</div>
You can use the "background-image" attribute of the div tag. And set the "background-size" attribute to contain or cover. Eg :
.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}
<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>
You can use the object-fit property in CSS to define how an image should fit into a container. You can use fill, contain, cover, none or scale down.
.the-carousel img {
object-fit: cover;
}

Justify thumbs horizontally

Check this code below
HTML:
$(document).ready(function(){
var $this=$('<img src="http://dummyimage.com/150x150/444/fff" alt=""/>');
for (var i=0;i<=9;i++){
$("#thumbs").append($this.clone());
}
});
#thumbs {
width: 100%;
margin-top:90px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbs">
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
</div>
Anchor tags gets justified when added directly in html page but not gets justified when added from javascript.
Any suggestions? Don't forget to check this fiddle
If you don't support below IE10, you can use flexbox. It will definitely work. Check https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more information.
#thumbs{ display:flex; justify-content: space-between; }

Masonry places blocks with huge spaces between them

There is a huge problem with masonry: it makes some useless spaces between blocks. I already tried everything, but nothing helps it.I would really apreciate if someone could tell me how to resolve this problem. Check screenshot.Result
UPDATE: I figured out, that the problem starts with first figure "T-Shirts". Somehow, when I delete class width-1 from there everything fits as it's meant to be.
Why is it happening and how can I solve this problem? Any suggestions? I really can't delete that figure, there must be some way to fit it with other blocks. Please help.
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 230
});
// element argument can be a selector string
// for an individual element
var msnry = new Masonry( '.grid', {
// options
});
main
{
height: 630px;
margin-top: 40px;
margin-left: 18%;
width: 1500px;
}
figcaption
{
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
.grid-item
{
width: 230px;
height: 180px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
.height-1
{
height: 370px;
}
.width-1
{
width: 360px;
}
.width-2
{
width: 470px;
}
.height-2
{
width: 360px;
height: 370px;
}
.width-2 img
{
width: 470px;
height: 180px;
}
<main class="grid">
<figure class="grid-item height-1 width-1">
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure class="grid-item">
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure class="grid-item">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="grid-item width-2">
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure class="grid-item">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure class="grid-item height-1">
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure class="grid-item">
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure class="grid-item">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="grid-item width-1">
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure class="grid-item">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="grid-item">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="grid-item">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>
You're missing imagesLoaded.
example:
// init Masonry
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});

Categories