Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below.
<section id="main">
<div class="inner">
<section>
<div class="box alt">
<div class="row 50% uniform">
<div class="4u"><span class="image fit"><img
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
</div>
</div>
</section>
</div>
</section>
Hover:
.image.fit >img:hover {
width: 1000px;
height: 1000px;
position: absolute;
}
The span elements should be completely removed and its classes placed on the image elements themselves.
Also, you have a nested section element that isn't doing anything for you.
Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:hover {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
I've taken Scott Marcus' answer and adapted to click, which was your original request.
The main diffence is the addition of a tags targeting elements on the page and using :target in the css.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:target {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<a href="#image1">
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image2">
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image3">
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
Related
I am trying to develop an image grid that changes some images in random at specified intervals using jquery or any other javascript means. Please be noted that I do not need all the images to change at the same time. One group of an image can change in different time interval compared to others.
The images are positioned absolute to the parent div so that it one can fadeIn while the other fades out until it reaches the last stage.
I am completely stuck without any idea on how to achieve this. Could anyone help me with this? Following is my code
(function(){
let first = $('.column1 img:gt(0)');
first.hide();
let images = $('.column1').find('img');
setInterval(function(){
let current = $('.column1 img:visible');
let next = current.next().length ? current.next():$('.column1 img:eq(0)');
current.fadeOut(300);
next.fadeIn(300);
}, 3000);
});
#main__slider{
width:40rem;
height:25rem;
margin: 0 auto;
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1{
border:1px solid;
position:relative;
}
img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>
You need to create a kind of loop like below and also consider random() to have different timing for the fade function:
$('.column1 img:eq(0)').each(function() {
$(this).hide();
});
setInterval(function() {
$('.column1 img:visible').each(function() {
let next = $(this).next().length ? $(this).next() : $(this).parent().find('img:eq(0)');
var t = Math.random()*2000;
$(this).delay(t).fadeOut(500);
next.delay(t).fadeIn(500);
});
}, 3000);
#main__slider {
width: 40rem;
height: 25rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1 {
border: 1px solid;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>
I have 3 images i want to display them inline style with text under them but without using bootstrap grid-system because i want them to be close to each other and centered, i tried doing it but once i add the text they get displayed under each other, how can i fix that? here is my code:
.box{
display:inline;
}
<div class="text-center">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>
You can also use flex on the parent and it will put them side-by-side.
.boxes{
display:flex;
justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center boxes">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>
You were close, but it should be display: inline-block. See code snippet:
.box{
display:inline-block;
}
<div class="text-center">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>
Note: I see you've added the text-center class which is not working here on Stack Overflow, but should do the trick in your own code.
CSS Flexbox to the rescue (along with proper HTML semantics and no inline CSS styles)!
.container { display:flex; justify-content:center; }
.container figure { text-align:center; margin:0; }
.container img { height:120px; }
<div class="text-center container">
<figure>
<img src="http://placehold.it/50x50">
<figcaption>Test</figcaption>
</figure>
<figure>
<img src="http://placehold.it/50x50">
<figcaption>Test</figcaption>
</figure>
<figure>
<img src="http://placehold.it/50x50">
<figcaption>Test</figcaption>
</figure>
</div>
I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.
Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)
I'm using Bootstrap and I'm trying to use the Collapse.
I want the div #film to hide when I click the <li class="rekruterring>and I'm missing something. It won't close no matter what I do, I've tried with accordion, data-parents, javascript and nothing makes the #filmdiv hide when I click the .rekruterring and the #rekruttering div is shown.
Here's my code and be aware that the #rekruterring is expanding as it should, but is not hiding #film.
/* Latest compiled and minified JavaScript included as External Resource */
/* DOES NOTHING */
$(document).ready(function() {
$(".rekruttering").click(function() {
$("#film").collapse('hide');
});
})
/* VIMEO */
img {
max-width: 100%;
height: auto;
}
.video {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
width: 100%;
/* Thumbnails 5 across */
margin: 1%;
}
.video img {
width: 100%;
opacity: 1;
}
.video img:hover,
.video img:active,
.video img:focus {
opacity: 0.75;
}
.categories li {
list-style-type: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="accordion" class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galleri</h2>
<hr class="bg-primary">
</div>
<div class="col-lg-12 categories text-center">
<ul>
<a class="film" data-toggle="collapse" data-target="#film" data-parent="#accordion">Firmapræsentation</a> |
<a class="rekruterring" data-toggle="collapse" data-target="#rekruterring" data-parent="#accordion">Rekruterringsfilm</a> |
<li>TV -/Biografspots & Imagefilm</li>|
<li>Salgs- & Produktfilm</li>
</ul>
</div>
</div>
<div id="film" class="row text-centered collapse in">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">FILM</h2>
</article>
</div>
</div>
<!-- FILM -->
<div id="rekruterring" class="row text-centered collapse">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">REKRUTERRING</h2>
</article>
</div>
</div>
<!-- REKRUTERRING -->
</div>
This is not working because there is a Bootstrap bug/issue when using the parent class. It relies on the use of the panel class being wrapped around your collapse elements.
https://github.com/twbs/bootstrap/issues/10966
Updated JSFiddle
<div class="panel">
<div id="film" class="row text-centered collapse in">
<div class="panel">
<div id="rekruterring" class="row text-centered collapse">
I want do to something like background-size: cover but I don't care about the centering of the image, I just want it to fit the whole container.
I decided to do that by centering the image in a container and checking if the image has margin. If the image has margin-right then it needs width:100% and height:auto otherwise height:100% and width:auto;
It all worked fine until I tested it under Firefox. The problem is $(this).css("margin-top") returns a number in all browsers except Firefox. Firefox returns "auto". I tried replacing margin-top with .offset.top but that returns the offset of the element regarding the whole page, not it's closest relative parent.
Here is my code:
$("aside .img-container").each(function() {
if ($(this).find("img").offset().top >= 0) {
// if image has margin-top make it height 100%
$(this).addClass("full_height");
} else {
$(this).removeClass("full_height");
}
if ($(this).find("img").offset().left > 0) {
$(this).removeClass("full_height");
}
})
aside .img-container {
position: relative;
width: 25%;
height: 0;
padding-bottom: 25%;
display: inline-block;
float: left;
}
aside .img-container img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
margin: auto;
}
aside .full_height img {
width: auto !important;
height: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
</aside>
My question is: Is there a function similar to .offset().top that returns the actual length between the image and the container because there are quite a lot of pictures and if I have to calculate it manually I am afraid it'll become too laggy.
I am open to other suggestions too.
Edit: Added the html.
Is there a function similar to .offset().top that returns the actual length between the image and the container
.offset gets coordinates in respect to the whole document; .position however gets you the position in relation to the element’s “offset parent”.
The offset parent is the first ancestor element that itself is positioned in some way (so has a CSS position value different from the default static.) Since your img-container elements are relatively positioned, they constitute the offset parent for your images inside them.