I have a div that with an image in it
#slideshow {
line-height: 1;
position: relative;
/*height: 125px;*/
/*width: 100vw;*/
border-radius: 12px;
overflow: hidden;
margin-bottom: 5px;
margin-top: 10px;
}
#slideshow img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
opacity: 0;
font-size: 15vw;
text-align: center;
color: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
}
<div id="slideshow">
<img alt="c" class="rectangle__image" src="/assets/media/ads-images/shad_NiOyJ1U.png">
</div>
I don't want to manually set the height of the image's parent; the height of the parent container should be contingent on the height of the image, but when I write the page this way, the image fails to display.
You need to remove position: absolute; from the img since absolute positioning removes the element from document's flow. Also you had set opacity to 0.
#slideshow {
line-height: 1;
position: relative;
/*height: 125px;*/
/*width: 100vw;*/
border-radius: 12px;
overflow: hidden;
margin-bottom: 5px;
margin-top: 10px;
}
#slideshow img {
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
opacity: 1;
font-size: 15vw;
text-align: center;
color: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
}
<div id="slideshow">
<img alt="c" class="rectangle__image" src="https://source.unsplash.com/random">
</div>
Pen Link - https://codepen.io/techysharnav/pen/RwpByxW
Related
I have this small image and i want to repeat so that it looks like a shadow on top of my div that it's like a cookies notification. How can i position it on top of my div cookieConsent like a shadow on the top?
THE IMAGE:
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
z-index: 9999;
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
You don't need to use an image for this, you can use the box-shadow properties and negative values - specifically the y and spread properties.
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 50px;
left: 0;
right: 0;
z-index: 9999;
box-shadow: 0px -4px 10px -2px rgb(0, 0, 0,0.4);
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
If you need to use an image, set the image as a background on a pseudo element:
#cookieConsent::before {
content: '';
display: block;
background-image: url(https://via.placeholder.com/10);
background-repeat: repeat-x;
width: 100%;
height: 10px;
position: absolute;
left: 0;
top: -10px;
}
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 50px;
left: 0;
right: 0;
z-index: 9999;
}
#cookieConsent::before {
content: '';
display: block;
background-image: url(https://via.placeholder.com/10);
background-repeat: repeat-x;
width: 100%;
height: 10px;
position: absolute;
left: 0;
top: -10px;
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
I'm baffled. I've tried adding padding-top to my content, changing my nav from fixed to sticky, tried to hide with z-index etc...
My content doesn't scroll beneath the nav. they overlap.
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.nav-center {
width: 90vw;
max-width: 600px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.nav-center h1 {
font-size: 2.5rem;
text-transform: capitalize;
letter-spacing: 2px;
}
.articles {
padding: 2rem 0;
width: 90vw;
max-width: 600px;
margin: 0 auto;
/* padding-top: 128px; */
overflow: auto;
}
Hello so I am trying to make a div appear when an element has been toggled. The function and events definitely work because if I remove the styling then the element appears but when I add it, it has disappeared and I actually have no idea why. It disappears when I add position:absolute but even when I put the height and width to 100% and it doesn't follow. Here is my Sandbox.
Here is my css:
* {
box-sizing: border-box;
}
html,
body,
#root {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
user-select: none;
background: lightblue;
}
.Main {
height: 100%;
width: 100%;
position: abosolute;
}
.Contain {
border-radius: 50%;
box-shadow: 50px rgba(0, 0, 0, 0.05);
position: absolute;
height: 50px;
width: 50px;
padding-left: 20px;
margin-bottom: 20px;
z-index: 998;
cursor: pointer;
}
.Contain p {
color: white;
}
.Item {
width: 100%;
height: 100%;
background: white;
border-radius: 5px 30px 30px 5px;
will-change: transform, opacity;
position: absolute;
display: inline-block;
bottom: 0.1%;
box-shadow: 50px rgba(0, 0, 0, 0.05);
}
.Item p {
color: black;
}
.Buttons {
top: 20%;
left: 25%;
z-index: 998;
position: absolute;
}
.Overlay {
background-color: #282c34;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.05);
z-index: 999;
position: absolute;
}
I would post the JSX but they're in different pages and it is probably easier to see the sandbox
Thank you!
So I figured out that what was causing issues with my style was my <a.div> around my overlay component that reduced the styling. So I made the styling for the div to be position: 'sticky' and top:0 and width and height to 100%.
Any children of another div would be styled in relative to fit the parent div so the parent div must be styled accordingly
I'm building an image lightbox with a close button. The Image should scale to it's default size until it hits a maximum of 90% page width/height.
This works fine with smaller images than the maximum, anything above will overflow the container div.
Here is my codepen example:
https://codepen.io/gempir/pen/eMYmyx
How do I force the image to scale?
Setting
img {
max-height: 100%;
max-width: 100%;
}
Does not help because the parent div has no fixed width. Any idea how to handle this situation correctly, besides using JS to calculate on the fly.
.image-overlay {
display: flex;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
text-align: center;
user-select: none;
justify-content: center;
align-items: center;
}
.image-overlay .image-container {
display: inline-block;
position: relative;
max-width: 90% !important;
max-height: 90% !important;
background: blue;
}
.image-overlay .image-container .close {
position: absolute;
top: 5px;
right: 5px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 5px;
}
.image-overlay .image-container img {
display: block;
max-height: 100%;
max-width: 100%;
}
<div class="image-overlay">
<div class="image-container">
<img src="https://picsum.photos/g/1800/1800">
<div class="close">close</div>
</div>
</div>
Use viewport units instead:
.image-overlay {
display: flex;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .25);
text-align: center;
user-select: none;
justify-content: center;
align-items: center;
}
.image-overlay .image-container {
display: inline-block;
position: relative;
max-width: 90% !important;
max-height: 90% !important;
background: blue;
}
.image-overlay .image-container .close {
position: absolute;
top: 5px;
right: 5px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 5px;
}
.image-overlay .image-container img {
display: block;
max-height: 90vh;
max-width: 90vw;
}
<div class="image-overlay">
<div class="image-container">
<img src="https://picsum.photos/g/1800/1800">
<div class="close">close</div>
</div>
</div>
This will restrict your image based on the actual viewport available, instead of the container, your image is in.
Codepen example
You can use vmin and vmax to deal with this if you want to change behaviour depending on the viewport.
.image-overlay {
display: flex;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0, .25);
text-align: center;
user-select: none;
justify-content: center;
align-items: center;
}
.image-container {
display: block;
position: relative;
background: blue;
}
.close {
position: absolute;
top: 5px;
right: 5px;
color: white;
background: rgba(0,0,0,0.5);
padding: 5px;
}
img {
display: block;
max-width: 90vmin;
max-height: 90vmin;
}
<div class="image-overlay">
<div class="image-container">
<img src="https://picsum.photos/g/1800/1800">
<div class="close">close</div>
</div>
</div>
Explanation:
vmin = 1%of min viewport size (width or height, equals to vh or vw depending on which one is the smaller)
vmax = the opposite of vmin.
what can vmin and vmax do?
you can use vh and vw (or % depending on the situation) to resize images, but sometimes they look too small on smartphones, so you can use:
.images{
max-width: 90vmin;
max-height: 90vmin;
}
#media(max-width:600px){
.images{
max-width: 90vmax;
max-height: 90vmax;
}
}
they'll fit well on computer viewports (or even smart TV etc) and will be a bit bigger on smartphones.
I'm trying to create a UI element that remains centered and the image scales to the size of the container. I have additional caption and text over the image. But the image seems to scale proportionally over only some of the range when I adjust the height or width. Preferably using only CSS and HTML. The top-level div does need to be absolutely positioned. I'm indifferent to the use of flexbox. That was just one tact I've tried.
Here it is as a codepen.
And the full code is below, though it is easier to play with it in the codepen as you can adjust the results pane easily. (open up the console so you can also adjust height.)
.block {
/* this needs to remain an absolute positioned block with size and location expressed in percent */
position: absolute;
height: 80%;
width: 80%;
top: 10%;
left: 10%;
background-color: #777777;
/* Don't care if using flexbox */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
}
.imagecontain {
position: relative;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.image {
max-height: inherit;
max-width: calc(100% - 8px);
padding: 0 !important;
border: 4px solid #123456 !important;
}
.button {
border-color: #b2b2b2;
background-color: #f8f8f8;
color: #444;
position: relative;
display: inline-block;
margin: 0;
padding: 0 12px;
min-width: 52px;
min-height: 47px;
border-width: 1px;
border-style: solid;
border-radius: 2px;
vertical-align: top;
text-align: center;
text-overflow: ellipsis;
font-size: 16px;
line-height: 42px;
cursor: pointer;
box-shadow: 0px 0px 3px #888888 !important;
}
.overimage {
vertical-align: bottom;
position: absolute;
bottom: 10%;
left: 50%;
max-width: 80%;
min-width: 60%;
padding: 5px;
opacity: .7;
transform: translateX(-50%);
background-color: black;
color: white;
border-radius: 10px;
z-index: 2;
}
.name {
text-align: bottom;
background-color: white;
padding: 5px;
border: 1px solid black;
}
<div class="block">
<div class="imagecontain">
<div class="overimage">this is a test of the emergency broadcast</div>
<img class="button image" src="https://scontent-dfw1-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/582520_10151526852434301_1015227082_n.jpg?oh=6537667094d5a160b8fbab0728dc2f5a&oe=57971FCB">
</div>
<div class="name">Mountains</div>
</div>
Use the background-size properties in CSS. Change your image from an tag to the background of the div. The specific property you're looking for is probably
background-size: cover;
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Add:
.imagecontain {
max-width: 100%;
width: 100%
}
Remove:
.block {
height: 80%;
}