I know that we can create a responsive horizontal image easily, like that.
.img-horiz-resp {
max-width:100%;
height:auto;
}
But, in my case I need :
a header on top
a content (for now it can be a simple image)
a footer
Then, when resizing the browser vertically, I wish that the 'content' adapt its size.
I have try here : https://codepen.io/cdemez/pen/qBbKVYp
But without success.
By using VH for the height you can get you image responsive (there are other ways too, but this is simple).
VH is used for how much of the available height that should be used, like percent (%). 100VH is the whole screen from top to bottom, regardless of your screen size.
Now I put the image in the css-file (and used it ONLY as background, not background-image), but if you want to use it in your html-file, remember to set your with to 100%.
https://jsfiddle.net/battleaxe/u07cfbog/#&togetherjs=lbxrukCzHi
HTML:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100%;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
header {
height: 6vh;
width: 100%;
background-color: #2e4b49;
display: flex;
justify-content: center;
align-items: center;
}
ul {
width: 60%;
display: flex;
justify-content: space-between;
list-style: none;
color: #fff;
text-transform: uppercase;
}
.content {
height: 84vh;
width: 100%;
background: url("https://cdn.socloze.com/cdn/e_663aa122-718e-a8d3-301d-39f64b8523b0/ebdc5bef01506acc759b39f64b9cc917.jpg")
no-repeat center center;
background-size: contain;
/* You can use background-size: cover; if you want the image to cover your whole free space. */
}
footer {
height: 10vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #2e4b49;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<ul>
<li>This</li>
<li>Is</li>
<li>a</li>
<li>Header</li>
</ul>
</header>
<div class="content"></div>
<footer>
<p>This is a footer</p>
</footer>
</body>
</html>
Things you can look up are VH and VW, how the work and how they can be used. Also, try different background-sizes (cover, contain, and so on).
Good Luck!
Related
I'm trying to achieve this exact design but don't know how to approach it, whether to use grid or even flex. the content will also be dynamically rendered to I'm avoiding hard coding it
In the code below I posted html and css that you can use for styling similar to the image:
body {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.parentAll {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 80%;
margin: 0 auto;
/* width: 1000px;*/
}
.parentAll:nth-child(2) {
width: 100%;
}
.parentAll div {
width: 220px;
text-align: center;
line-height: 100px;
height: 220px;
font-size: 2rem;
background-color: #135d21;
color: white;
border-radius: 50%;
}
.parentAll div.active {
color: #101000;
background-color: #d79d25;
}
#media only screen and (max-width: 1200px) {
.parentAll div {
width: 170px;
height: 170px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circles</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="parentAll">
<div>div1</div>
<div class="active">div2</div>
<div>div3</div>
<div>div4</div>
</section>
<section class="parentAll">
<div>div5</div>
<div>div6</div>
<div>div7</div>
<div>div8</div>
<div>div9</div>
</section>
<section class="parentAll">
<div>div10</div>
<div>div11</div>
<div>div12</div>
<div>div13</div>
</section>
</body>
</html>
you could play with the "width" and "height" of ".parentAll div" to achieve the size that is suitable for you and in different screen sizes.
for rendering the content dynamically you can use javascript or vue or other options and that is not related to the style of circles.
I have a flex container, and in that container, I have a bunch of images. Using flexwrap, and a flex-item width of 33%, this presents the images nicely ... in Chrome (that is, they maintain their aspect ratios). In Safari, however, the images get stretched in the vertical direction which looks terrible.
Is there a fix for this?
(Note: For the code snippet below, you will have to open this post in both Chrome and Safari to see what I am talking about)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<img src='https://swipestack.s3.amazonaws.com/s/q/1.jpg' alt='1'>
<img src='https://swipestack.s3.amazonaws.com/s/q/2.jpg' alt='2'>
<img src='https://swipestack.s3.amazonaws.com/s/q/3.jpg' alt='3'>
<img src='https://swipestack.s3.amazonaws.com/s/q/4.jpg' alt='4'>
<img src='https://swipestack.s3.amazonaws.com/s/q/5.jpg' alt='5'>
<img src='https://swipestack.s3.amazonaws.com/s/q/6.jpg' alt='6'>
<img src='https://swipestack.s3.amazonaws.com/s/q/7.jpg' alt='7'>
<img src='https://swipestack.s3.amazonaws.com/s/q/8.jpg' alt='8'>
</div>
</body>
<style>
.container{
display: flex;
flex-wrap: wrap;
overflow: auto;
width: 400px;
height: 550px;
padding: 10px;
background-color: green;
}
.container > * {
width: 33.33333%;
}
</style>
</html>
you can try this, which works only if you give the first and second images the same height of 475px as the others :
<style>
.container {
width: 400px;
height: 550px;
padding: 10px;
background-color: green;
overflow: auto;
}
.container:first-child {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.container > * {
width: 33.33333%;
height: auto;
}
</style>
What am I doing wrong? In Chrome, Firefox, Opera it is cool but not in Safari/Explorer.
Parent is in the bottom right corner, child1 over parent (vertical centered with parent). Parent may have a different size and the child must be still over it.
.cotainer{
position: fixed;
bottom: 0px;
right: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
margin: 10px;
}
.parent {
width: 80px;
height:80px;
min-width: 80px;
min-height:80px;
background-color:#8BBF46;
border-radius:50%;
bottom: 0px;
right: 0px;
position: relative;
text-align: center;
cursor: pointer;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
margin: 15px;
order: 1;
order: -webkit-1;
order: -moz-1;
order: -ms-1;
order: -webkit-1;
}
.child1{
position: absolute;
bottom: 100%;
}
.child2{
font-size: 16px;
color: #222;
padding: 0.4em;
display: block;
}
.child2:hover{
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="stylesheets/style-okrojone.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="cotainer">
<div class="parent">
<div class="child1"><img src="https://i.stack.imgur.com/tbnsI.jpg" alt="grafika-dodatkowa"></div>
<i class="child2">parent</i>
</div>
</div>
</body>
</html>
The problem is, that your parent container is a flexbox, but your child1 uses position: absolute. You should not use absolute positioning for elements in a flexbox, as this is not offically supported.
So it looks like chrome is able to render it the "correct" way, but some other browser may not be. The best would be to change your layout, so that you don't use a flexbox and an absolute position anymore.
give your img these additional styles
margin-left: -306px; /* has to be half of the image width */
position: absolute;
bottom: 0;
and your .child1 these additional styles
width: 100%;
left: 0;
hope this works for you...
I think flex is a good solution to develop a responsive video player control bar. The example is the control bar of the amazon player.
On the left and right I want squared buttons. The progress bar gets the rest of the space.
I thought about setting padding-top equal to height but it is not working.
What is wrong?
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Type" content="image/svg+xml"/>
<meta http-equiv="X-UA-Compartible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player flex</title>
<style>
html {
margin: 0px;
padding: 0px;
border: 0px;
}
body {
margin: 0px;
padding: 0px;
border: 0px;
}
.pic {
position: relative;
width: 100%;
height: 100%;
}
.pic img {
object-fit: contain;
}
.control-bar {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
}
.pause_btn {
flex-grow:1;
background-color: DD88EE;
background-image: url(media/pause-icon-white-48.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-height: 40px;
min-width: 40px;
}
.time {
flex-grow:1;
background-color: #CB8C1D;
min-height: 40px;
min-width: 40px;
}
.fullscreen_btn {
flex-grow:1;
background-color: #4C3327;
background-image: url(media/fullscreen-icon-off-white-48_160.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.sound_btn {
flex-grow:1;
background-color: #BD3632;
background-image: url(media/speaker_loud_white_48.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.progress {
flex-basis:50%;
flex-grow:1;
background-color: #4C3327;
min-height: 40px;
min-width: 40px;
}
#media (min-width: 769px) {
.duration{
flex-grow:1;
background-color: #CB8CEE;
min-height: 40px;
min-width: 40px;
}
}
</style>
</head>
<body style="background-color:black; text-align: center;">
<div class="pic">
<img src="media/vorschaubild.png" alt="Smiley face" height="100%" width="100%">
</div>
<div class="">
<div class="control-bar-wrapper">
<div class="control-bar">
<div class="pause_btn">pause</div>
<div class="time">time</div>
<div class="duration"></div>
<div class="progress">progress</div>
<div class="sound_btn">sound</div>
<div class="fullscreen_btn">full</div>
</div>
</div>
</div>
</body>
If you wish to have the height and width of the bottom as a ratio of the page width, you have to use a wrapper for the buttons:
.square {
width: 10%; // Width = 10% of page with
}
.square div {
padding-bottom: 100%; // So height = 10% of page width
line-height: 0px; // Avoid additional height
}
And the button elements wrapped like this:
<div class="square">
<div class="pause_btn"></div>
</div>
Also, the padding-bottom technique implies that the elements don't contain any non-absolute elements (which otherwise add to the height of the element, breaking its squareness)
That's why I removed captions and set line-height to 0
Here is the result: https://jsfiddle.net/jsfmb9at/3/
Edit: I removed flex-grow: 1 from these non-expanding elements, and added a max-width to the .square css, otherwise the control bar is too big on horizontal players, which is weird...
Other solutions :
For buttons which width is a ratio of page height, the easiest way would be to just set control-bar height as a percentage of height, and square <img> elements as buttons (I see you use images, as background) and setting their wrapper as 'display: inline-block'
To get rid of images or image requests, you can even use <img> elements with transparent images data provided inline with a data: URI with the required ratio (1:1 for square)
I would like to vertically align two images (with different height but same width) AND get both of them fitting the screen.
I could put them in different div.
Centered or not. Doesn't matter. (they got to fit the screen)
I have already read some posts here about this problem, but without success.
I would solve this problem with css, but i could use javascript or jquery too.
Any help will be appreciated.
sample image ( drawing image and blue band bottom):
here the code:
<html lang="en">
<head>
<style>
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
background-image: url("http://frisketti.altervista.org/img/sfondo.jpg");
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
footer {
display: block;
min-height: 100px;
background: #ffeebb;
background-image: url("http://frisketti.altervista.org/img/footer.jpg");
}
</style>
</head>
<body>
<div id='main'>
<article></article>
</div>
<footer></footer>
</body>
</html>
The property vertical-align doesn't work with min-height. It's working with height or padding.