Demo: http://codepen.io/malte/pen/kDlbt
I am using an absolute positioned wrapper to center an image in a thumbnail frame. (Only) On mobile safari, the image won't be displayed. if you inspect the .image-pos container you'll see that the height is properly set to its parent's size. applying a fixed px height to it will make the image show up... Does anyone know how to fix that?
It's working on any Desktop browser...
HTML:
<div class="wrapper">
<div class="thumb-grid">
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/016e551de2f53d58e7f4acd68279e6a1.JPG&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
</div>
</div>
CSS:
.wrapper {
width: 600px;
margin: 30px auto 0
}
.thumb-grid {
text-align: justify;
}
.thumb-grid:after {
content: '';
display: inline-block;
width: 100%;
}
.thumb {
position: relative;
display: inline-block;
width: 31.5%;
height: 0;
padding-top: 29%;
margin-bottom: 6%;
}
.image {
height: 73%;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 100%;
vertical-align: top;
display: block;
border: 1px solid #eee;
}
.image-pos {
height: 100%;
left: 50%;
margin-left: -300px;
position: absolute;
text-align: center;
width: 600px;
}
.image-pos img {
height: 100%;
max-height: 100%;
min-height: 100%;
max-width: none;
width: auto;
display: inline;
border: 0;
}
.details {
height: 27%;
position: absolute;
top: 73%;
}
.details h5 {
margin: 0;
padding-top: 5px;
}
Demo: http://codepen.io/malte/pen/kDlbt
Related
The angle left icon basically disappears when I set its position to absolute, but it remains otherwise.
Here the angle left icon is not visible due its position property. How can it appear on the screen so that I can position it on the top left part of the image, so as to make an image slider.
This is my html code:
<section>
<div class="team">
<div>
<h1 id="teamtext">Our Team and Contributers</h1>
</div>
<div class="content">
<div class="imageslider">
<img src="assets/photo1.jpg">
<img src="assets/photo2.jpg">
<img src="assets/photo3.jpg">
<img src="assets/photo4.jpg">
<img src="assets/photo5.jpg">
</div>
</div>
<div class="slideleft">
<i class="uil uil-angle-left"></i>
</div>
<div class="slideright">
<i class="uil uil-angle-right"></i>
</div>
</div>
</section>
and this is my CSS code:
.content{
height: 400px;
width: 750px;
overflow: hidden;
}
.imageslider{
height: 100%;
width: 100%;
}
.imageslider img{
width: 100%;
height: 100%;
object-fit: cover;
}
.slideleft{
color: red;
font-size: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.slideright{
color: red;
font-size: 100px;
}
I searched similar questions in the internet but they aren't working.
It appears while having position: absolute;. Please see my codesnippet:
<style type="text/css">.content {
height: 400px;
width: 750px;
overflow: hidden;
border: solid;
}
.imageslider {
height: 100%;
width: 100%;
border: solid;
display: flex;
flex-wrap: wrap;
}
.imageslider img {
width: 50%;
height: calc(400px / 3);
object-fit: cover;
}
.slideleft {
color: red;
font-size: 100px;
position: absolute;
top: 15%;
}
.slideright {
color: red;
font-size: 100px;
}
<section>
<div class="team">
<div>
<h1 id="teamtext">Our Team and Contributers</h1>
</div>
<div class="content">
<div class="imageslider">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
</div>
</div>
<div class="slideleft">
<i class="uil uil-angle-left">slideleft</i>
</div>
<div class="slideright">
<i class="uil uil-angle-right">slideright</i>
</div>
</div>
</section>
I want to centralize a div block on both x-axis and y-axis. But I can't move the block by using translate.
.maincontain {
position: relative;
min-height: 100%;
width: 100%;
float: left;
}
.bannerimage {
position: absolute;
width: 64%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: 100% 100%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>
You may consider using flex or grid to avoid playing around with position, min-height can also use vh units (viewport height) instead % that requires to inherit an height value from the parent to calculate it.
examples:
body {
margin: 0;
}
.maincontain {
display: grid;
min-height: 100vh;
}
.bannerimage {
margin: auto;
width: 64%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>
body {
margin: 0;
}
.maincontain {
display: flex;
min-height: 100vh;
}
.bannerimage {
margin: auto;
width: 64%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>
On my webpage there is an area and I'd like to add a image to it. I don't know the image's size and orientation (portrait or landscape). But I want it to fit the area as it is displayed in the picture:
So, if an image has a landscape orientation it must fill the whole width of the area. See picture 1. If the image's width is bigger that the area's width the image's width must be constrained and if its width is smaller - the image must be widened. However if the image's height is bigger than the area's one the image's height must be constrained. See picture 2.
The similar I want for the portrait image. See picture 2.
In short, what I want can be easily done with object-fit: contain;.
.wrapper {
width: 30%;
height: 400px;
overflow: hidden;
border: 1px solid black;
position: relative;
}
.img {
width: 100%;
height: 100%;
object-fit: contain;
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 15px;
background-color: #cccccc;
}
<div class="wrapper">
<img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
<span class="label">Label</span>
</div>
Here is the CodePen: see the code
But the problem is that I have a label to each picture and I want it to be on the top-right corner of the picture and not the area.
Is there any way to do this with CSS only?
Any help would appreciated! Thank you in advance!
instead of the object-fit: contain; replace it with background-size:cover in the img selector css file.
You can wrap the image with a div that has a display: inline-block rule, that will force the div to fit the image scale, then, in this div add another div for the label and position it with absolute.
.cont {
width: 300px;
height: 250px;
background-size: contain;
background-repeat: no-repeat;
margin: 20px;
border: 3px solid black;
display: flex;
align-items: center;
justify-content: center;
}
div .image-cont {
display: inline-block;
position: relative;
}
img {
max-width: 300px;
max-height: 250px;
width: auto;
height: auto;
}
.label {
background-color: yellow;
padding: 5px;
position: absolute;
top: 0;
right: 0;
}
<div class="cont">
<div class="image-cont">
<img src="https://image.shutterstock.com/image-photo/beautiful-abstract-grunge-decorative-navy-260nw-539880832.jpg" />
<div class="label">Label</div>
</div>
</div>
<div class="cont">
<div class="image-cont">
<img src="https://i.pinimg.com/originals/1b/30/80/1b30806bed30a7d071752948d00e75f8.jpg" />
<div class="label">Label</div>
</div>
</div>
You can do the following:
Wrap image and .label span with another span with class e.g. .inner-wrapper and add to its css
position: relative;
height: 100%;
Remove from .wrapper css position: relative; and add
display: flex;
justify-content: center;
Replace in .img css width: 100%;height: 100%; with max-width: 100%;max-height: 100%;
Look in the snippet in full page mode and resize the window.
.wrapper,
.wrapper200 {
width: 30%;
height: 400px;
overflow: hidden;
border: 1px solid black;
/*position: relative;*/
display: flex;
justify-content: center;
}
.wrapper200 {
height: 200px;
}
.inner-wrapper {
position: relative;
height: 100%;
}
.img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 15px;
background-color: #cccccc;
}
/* for visual illustration */
.container {
display: flex;
justify-content: space-evenly;
padding: 10px;
outline: dashed red 1px;
margin-bottom: 25px;
}
<h1>Heigth: 200px</h1>
<div class="container">
<div class="wrapper200">
<span class="inner-wrapper">
<img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
<span class="label">Label</span>
</span>
</div>
<div class="wrapper200">
<span class="inner-wrapper">
<img class="img" src="https://images.unsplash.com/photo-1581622634376-ff17d073c4f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1832&q=80" alt="">
<span class="label">Label</span>
</span>
</div>
</div>
<h1>Heigth: 400px</h1>
<div class="container">
<div class="wrapper">
<span class="inner-wrapper">
<img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
<span class="label">Label</span>
</span>
</div>
<div class="wrapper">
<span class="inner-wrapper">
<img class="img" src="https://images.unsplash.com/photo-1581622634376-ff17d073c4f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1832&q=80" alt="">
<span class="label">Label</span>
</span>
</div>
</div>
You should try to use background-image instead of a single image
.wrapper {
width: 30%;
height: 400px;
overflow: hidden;
border: 1px solid black;
position: relative;
}
.img {
width: 100%;
height: 100%;
object-fit: contain;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 10%;
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 15px;
background-color: #cccccc;
}
<div class="wrapper">
<div class="img" style="background-image:url(https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80)" alt="">
<span class="label">Label</span>
</div>
</div>
Want to add horizontal line after image and it should be responsive.Right now it has 5 images in future i can add 6th image dynamically.So lines should be responsive to take 6th image.
Sample Of Image:
a {
display: block;
text-align: center;
position: relative;
}
a:after {
content: "";
width: 80%;
position: absolute;
left: 0;
top: 50%;
height: 1px;
background: green;
}
img{
width: 50px;
height: 50px;
border-radius: 50%
}
<a href="">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="error">
</a>
a {
display: block;
text-align: center;
position: relative;
}
hr {
border: 1px solid green;
width: 100%;
}
<a href="">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="error">
</a>
<hr>
<a href="">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="error">
</a>
<hr>
Your code doesn't work because you've set the <a> tag to display: block; which means that it occupies the entire line. This means that the line you've added will be 80% of the available space for the <a> tag.
If possible, consider adding an inline wrapper <div> and attach your line to that instead.
.link-wrapper {
position: relative;
display: inline-flex;
align-items: center;
}
.link-wrapper:after {
content: "";
position: absolute;
top: 50%;
z-index: -1;
left: 0;
height: 1px;
width: 100%;
background: green;
}
.link-wrapper a:not(:last-child) {
margin-right: 2em;
}
.link-wrapper img {
display: block
}
<div class="link-wrapper">
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
</div>
Well it depends but something like this could do the job.
.bar {
position: relative;
height: 50px;
display: flex;
justify-content: space-between;
}
.bar:before {
content: "";
display: block;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
height: 1px;
background-color: green;
}
.image-wrapper {
position: relative;
}
.image-wrapper img {
width: 50px;
border-radius: 50%;
}
#media (max-width: 425px) {
.bar {
flex-direction: column;
height: auto;
align-items: center;
}
.bar:before {
width: 1px;
top: 0;
bottom: 0;
transform: none;
height: 90%;
}
.image-wrapper {
margin-bottom: 10px;
}
}
<div class="bar">
<div class="image-wrapper">
<a href="#">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Alternative Text">
</a>
</div>
<div class="image-wrapper">
<a href="#">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Alternative Text">
</a>
</div>
<div class="image-wrapper">
<a href="#">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Alternative Text">
</a>
</div>
</div>
to add new line here :
add a new div
adjust the left property for the elements between start and end to fit all ... I give 2st 30% and 3rd 60% because I have 2 element ... so when you add new on decrease this.
finally I added background to all from .tline div for demo but you can specify a new background to each div
body {
padding-top: 100px;
}
.tline {
border-top: 2px solid gray;
position: relative;
}
.tline div {
display: inline-block;
width: 50px;
height: 50px;
border: px solid;
position: absolute;
border-radius: 35px;
text-align: center;
top: -25px;
background: url("https://www.w3schools.com/w3images/bandmember.jpg") center;
background-size: cover;
}
.tline div:nth-child(2) {
left: 30%;
}
.tline div:nth-child(3) {
left: 60%;
}
.tline div:last-child {
right: 0;
}
<div class="tline">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
I need to position elements on a side like in the image above and have onclick function on them to show the corresponding text. Any info on how to best achieve this to be responsive?
By responseive i mean that the dots and text should always stay on the same position relative to the size of the bottle.
What I did was to put everything inside the container div and then positioned the elements relative to that div and the bottle image absolute to the container div.
It kinda works when container div has fixed dimensions, but I guess there are better ways to do it.
EDIT: Added code! I suck at formatting, sorry.
<div class="bottle-one">
<div class="bottle-one-content">
<div class="bottle-one-image">
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
</div>
<a href="#msg1" class="droplet droplet1 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg2" class="droplet droplet2 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg3" class="droplet droplet3 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg4" class="droplet droplet4 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<img src="assets/images/bottle1.png" alt="" class="bottle-one-bottle">
</div>
</div>
.bottle-one {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30%;
}
.bottle-one-image {
height: 100%;
position: relative;
width: 251px;
}
.message {
left: -340px;
top: 180px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
text-transform: uppercase;
font-size: .7rem;
color: #004197;
height: 30px;
width: 400px;
margin-bottom: 1rem;
}
.message-hidden {
display: flex;
}
.message-hidden div:nth-of-type(1) {
text-align: right;
font-family: 'BrandonGrotesqueWeb-Black', sans-serif;
letter-spacing: 2px;
border-right: 1px solid #004197;
width: 70%;
}
.message-hidden div:nth-of-type(2) {
width: 30%;
display: flex;
overflow:hidden;
}
I came up with this to help you with aligning your element to the left of a div.
By using a mix of [psuedo-elements] and floats, I think this gives you the desired effect you are looking for. Post your code and I'll be more then happy to help you with the other part.
html {
width: 550px;
border: none;;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
height:200px;
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.sibling {
border: 3px solid red;
height:200px;
}
.sibling.root:after {
content: 'Sibling';
color: green;
}
.float {
float: left;
border: 3px solid blue;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'floated Element';
color: red;
}
.root {
overflow: hidden;
}
<div class="float">
</div>
<div class="sibling root">
</div>