I'd like to use flexbox to create a flip card have an image (using the <picture> element) on the front and some information on the back site.
Images can have different width/height ratio, but should be always centric. I achieve this by using (actually the sizes attribute determines the width of the element):
<div style="display:flex;flex-direction:column;align-items: center;justify-content: center;border:red solid 2px;height:100%">
<picture>
<img src="data/IMGP7206_sized.jpg"
srcset="data/IMGP7206_sized.jpg 4189w" alt="photo"
sizes="60vw">
</picture>
</div>
The backside of the card should be the same as the front, which is defined by the image size. Current CSS implementations of flipcards assigning an fixed width/height to the container. I would like to end up with something like this:
<div style="display:flex;flex-direction:column;align-items: center;justify-content: center;border:red solid 2px;height:100%">
<div class="flip-container">
<div class="flipper">
<div class="front">
<picture>
<img src="data/IMGP7206_sized.jpg"
srcset="data/IMGP7206_sized.jpg 4189w" alt="photo"
sizes="60vw">
</picture>
</div>
<div class="back">
SAME SIZE AND POSITION AS IMAGE
</div>
</div>
</div>
</div>
Flipcard structure was taken from David's page.
Is there a possibility to get this done using CSS only?
Related
I am working on a mini project to recreate a website using bootstrap 4. I am on a part where I need to have three images in a grid format two on the top and one on the bottom. The top two should be even by height (not width the image on the right is larger) like the image below:
Notice how on the bottom (they are even at the top) they are perfectly even.
Now here is how mine looks:
See how the image on the left looks it is slightly higher then the one on the right.
Here is my code for that portion:
<div class="row justify-content-center">
<div class="col-md-4">
<img src="assets/home_seasonal_1.jpg" class="img-fluid" alt="Responsive image" >
</div>
<div class="col-md-6">
<img src="assets/home_seasonal_2.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
<br>
<div class="row justify-content-center">
<div class="col-md-10">
<img src="assets/home_seasonal_3.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
I have tried different variations of the columns and nothing has worked so far. The goal is to do this without modifying the css and only using bootstrap.
Here is the bootstrap version I am using:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
I just need some guidance on how I can make this happen.
Here are the images:
If you look at .img-fluid, it sets the max width to 100% and the height auto. That means, if the box that contains the image is narrow, the image might be scaled down and so is the height.
Also I realize, from your expected image, the top 2 pictures are shown from the bottom up while the last 1 is shown from top down.
Those points make me want to use those images as the background of those columns instead.
Structure
<div class="container">
<div class="row justify-content-center">
<!-- assets/home_seasonal_1.jpg -->
<div class="col-md-4" style="background: url('https://i.stack.imgur.com/A5PIq.jpg') center bottom /cover no-repeat"></div>
<!-- assets/home_seasonal_2.jpg -->
<div class="col-md-6" style="background: url('https://i.stack.imgur.com/zVUvf.jpg') center bottom/cover no-repeat"></div>
</div>
<div class="row justify-content-center">
<!-- assets/home_seasonal_3.jpg -->
<div class="col-md-10" style="background: url('https://i.stack.imgur.com/xhMX6.jpg') center top/cover no-repeat"></div>
</div>
</div>
Style
I am being lazy here to style them this way, but you can do inline css to set different styles for those columns. And I used white borders here to do the trick.
.row {
height: 12rem;
}
[class*="col-md"] {
border: 2px solid #fff;
}
Result
LOL it almost looks the same as your expected outcome!
fiddle: http://jsfiddle.net/aq9Laaew/144953/
For performance reasons, I want to use large-size images for desktop and smaller-size ones for mobile devices as my carousel slides.
I tried below code with only limited success:
<picture>
<source srcset="images/s2.jpg" media="(min-width: 768px)">
<source srcset="images/s2m.jpg">
<img class="second-slide" srcset="images/s2m.jpg" alt="2">
</picture>
Where s2m.jpg is the default (small) image and s2.jpg is the larger one.
The carousel works and selects the correct image depending on the screen size, but loses original responsiveness. That is, slides are not resized to the width of the parent element (.item). Instead, they are just cropped.
What is the proper way of achieving this?
In my opinion the problem can be solved with the HiSRC Framework - https://github.com/teleject/hisrc. You can then use the attributes data-1x or data-2x in the -Tag to define the different sized image sources in it:
For example:
<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/>
and insert the following jQuery Code in your Script to "activate" the HiSRC-Framework and give the Element around the pictures the class "hisrc":
$(document).ready(function(){
$(".hisrc img").hisrc();
$(".hisrc img+img").hisrc({
useTransparentGif: true,
speedTestUri: '50K.jpg'
});
})
<div class="hisrc">
<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/>
</div>
Hopefully it is helpful for you ;)
Actually, when you resize the window, the carousel is not supposed to decrease in height to cope with the changing width. This will distort the view of the page. It's the feature of bootstrap carousel to do so.
Regarding responsiveness, when you load the page in small devices (I mean no resizing in desktop browser) you will see the relevant slide image is only loaded anyway. I think this should work for you.
However, if you require to resize the images in height when width decreases, you can achieve using CSS
img{
width: 100%;
}
See this codepen for information.
Note: You might not want to impose the style to all <img>, so use wisely
Just create a css class and use it as follow:
.fitImage {
width: 100%;
box-sizing:border-box;
}
<picture>
<source srcset="images/s2.jpg" media="(min-width: 768px)">
<source srcset="images/s2m.jpg">
<img class="fitImage second-slide" srcset="images/s2m.jpg" alt="2">
</picture>
I did it like this:
<div class="carousel slide d-none d-sm-block" data-ride="carousel" data-interval="4000" data-pause="hover">
<div data-aos="fade-down" data-aos-duration="1000" class="carousel-inner aos-init aos-animate">
<div class="carousel-item active" style="cursor: default;">
<img data-delayed="1" data-href="" class="img_slider d-block img-fluid w-auto" lsrc="/images/carousel/autoskola.jpg" alt="" src="/images/carousel/autoskola.jpg">
<div class="carousel-caption">
<p class="welcome_message"></p>
<p class="slogan"></p>
</div>
</div>
</div>
</div>
<div class="carousel slide d-block d-sm-none" data-ride="carousel" data-interval="4000" data-pause="hover">
<div data-aos="fade-down" data-aos-duration="1000" class="carousel-inner aos-init aos-animate">
<div class="carousel-item active" style="cursor: default;">
<img data-delayed="1" data-href="" class="img_slider d-block img-fluid w-auto" lsrc="/images/carousel/baner-mobilni.jpg" alt="" src="/images/carousel/baner-mobilni.jpg">
<div class="carousel-caption">
<p class="welcome_message"></p>
<p class="slogan"></p>
</div>
</div>
</div>
</div>
so with d-none d-sm-block and d-block d-sm-none will hide / show carousel for certain screen sizes and with lsrc I will disable loading images, note that I will rename it back to src with javascript.
I have one child div vertically centered under a parent div {parent div has a certain height}. I have assigned the child div with height:100% but it is not taking this property only on safari. Here is a screenshot about the issue.Safari bug
Everything is working fine in chrome and moz but safari. Here is the live version of the website. http://www.ravnapp.com/
Any help will be appreciated, Thank You !
Update: Here is the relevent html code.
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
<div class="action-image uk-position-relative">
<div class="uk-cover-background">
<img src="img/action1.png" width="100%" height="" alt="">
</div>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
<div class="uk-vertical-align-middle">
<h1 class="avenirlight">TOTAL PRIVACY <br><span class="avenirmedium">AND CONTROL</span></h1>
<p class="desp blenderbook">Ravn is yours to use as you like. Everything is safe and secure and even your notifications are fully disguised. Your privacy is our priority.</p>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
<div class="uk-vertical-align-middle">
<h1 class="avenirlight">EXHALE, <br><span class="avenirmedium">FINALLY</span></h1>
<p class="desp blenderbook">Ravn is 100% discreet. All your activity is stored within Ravn so you won’t have any surprises popping up in your chat history or camera roll. We’ve got your back.</p>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
<div class="action-image uk-position-relative">
<div class="uk-cover-background">
<img src="img/action2.png" width="100%" height="" alt="">
</div>
</div>
</div>
It looks like the container divs don't actually have a height set on them and they need to have a height before the content can vertically center. since you are going full screen and setting width to 50% and want the height to match.. just add
height: 50vw;
to each container. This will set the height to half the viewport width, which will match the width of the box given your current setup.
You will have to adjust your images to be actually square though as they are a few pixels short.
I have a block:
<section id="why">
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="img/image.png" alt="image">
</div>
</div>
</div>
.container have a margins of left and right, and i can't position image on left of body.
I need to pull image on left of body, and i need to make it responsive.
it looks like this
Give this a try.
You don't need the container, row or col divs.
<section id="why" class="text-left">
<img src="img/image.png" alt="image">
</section>
To make an img responsive use this:
<img src="..." class="img-responsive" alt="Responsive image">
The .container has a padding of 15px on each side. By using a tool like Chrome Inspector, you can see the styles that each div has.
If not inspector, try removing each div that you have, one at a time and seeing how each one works. The time it took to ask this question, you could have narrowed it down by simply experimenting.
The official website is more than useful, is very well-documented, and it will clear up a lot of things if you take a little bit to read through it.
http://getbootstrap.com/css/
give this a try
<div id="why" class="pull-left">
<img src="..." class="img-responsive">
</div>
you will now have a responsive image. But take note that the class img-responsive by default is display: block. if you want to resize the image, just set the width and height of the image.
Im new into html,css and im trying to do a menu for a mobile App which consist in some images next to each other aligned vertically, I want to overlay some text to this images.
For example, imagine a main menu of an Sports info related App, it contains 5 background images, football image, basketball image, golf image...an each image has the text at the bottom of them.
To approach this, I made the following html code:
<body onload="onBodyLoad()">
<div id="cabecera">
<h1></h1>
</div>
<div id="menu-opciones">
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<h2><span>Sobre txorierri y Erandio</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<h2><span>Lugares de interes</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<h2><span>Dónde comer</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<h2><span>Dónde dormir</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/fronton.jpg" alt="">
<h2><span>Tiempo libre</span></h2>
</div>
</div>
</body>
This way im getting the image,then the text,then another image,then another text... so by css I repositioned the text to overlay each image. The problem is that now I get and empty space where the text before was, and I want the images to be next to each other. What is the best way to get rid of that empty space? notice that since this is for a mobile App I want to avoid working with pixels on css, and try to do all % related.
Not 100% sure what you are trying to achieve but I think you can clean up your html and achieve what your looking for. You could wrap each list item in an the and get the same effect. For Example:
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<h2><span>Sobre txorierri y Erandio</span></h2>
</div>
change to:
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt=""><span>Sobre txorierri y Erandio</span>
</div>
Then you set the to position:relative and the to position:absolute to take it out of the flow of the document. This will also eliminate that white space and you can position it or hide it in relation to your image using left:-9999; and opacity:0;
Hope that helps you somewhat.