I am trying to insert some images and add nameplates over them. Images can be vertical, horizontal, and square. They are static and added manually.
What I expect:
long images are scaled to fit max-750px wide parent
tall images are scaled to be no more than 80vh, otherwise fit parent width
nameplates always cover 100% of image width
Exactly how it should look. Blue is article, parent, 1000px wide. Red frames are containers .art, orange is img, black is span with plain text.
What I made so far.
Html:
<div class="art">
<img src="./some/path">
<span>Image name</span>
</div>
Css (scss):
.art {
max-width: 75%;
margin: 0 auto;
position: relative;
img {
object-fit: contain;
width: 100%;
max-height: 80vh;
}
span {
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
bottom: 1rem;
padding: 1rem;
background-color: rgba(0,0,0,0.85);
}
}
Problem: works for long images, does not for tall. Nameplates stick outside of image.
Please, check this code. Here is your solution.
add a DIV for Image parent and also add CSS for this.
.art {
max-width: 75%;
margin: 0 auto;
position: relative;
text-align:center;
}
.art-container{
display:inline-block;
position:relative;
}
img {
object-fit: cover;
height: 80vh;
max-width:100%;
}
span {
box-sizing: border-box;
position: absolute;
color:white;
left: 0;
width: 100%;
bottom: 1rem;
padding: 1rem;
background-color: rgba(0,0,0,0.85);
}
}
<div class="art">
<div class="art-container">
<img src="https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg">
<span>Image name</span>
</div>
</div>
<!-- https://cdn57.androidauthority.net/wp-content/uploads/2015/11/00-best-backgrounds-and-wallpaper-apps-for-android.jpg -->
Related
So I have a CSS issue that I can't seem to get my head around. I have solved this in a number of ways none of which seem to pass WCAG Axe accessibility tests as it mentions overlapping of elements.
I have some text whose position is correct, but I want the background-color of the text to span the whole width of the page without altering the position of the text.
Here's a simple example of the issue I want to solve.
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
width: 100%;
background: green;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>
My solution involved an extra absolute div with the background set, but that didn't pass accessibility. Any pointers would be great, I appreciate I'm probably being silly here.
You can add the following settings to .content: position: relative; and left: -50%; to move its left side to the left border, and a left and right padding of 50% to make it wider/full width of its parent and keep the text contents aligned with the .container element:
html,
body {
margin: 0;
}
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
width: 100%;
background: green;
position: relative;
left: -50%;
padding-left: 50%;
padding-right: 50%;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>
Note that the added padding would not work if you somewhere have a box-sizing: border-box rule for all your elements. In this case you'd have to add box-sizing: content-box to the .content rule to reset this parameter to its default.
You can achieve this by so many ways, here I have used ::before pseudo element and without setting it's width apply left:-100% and right:-100%. Which is nothing but cover entire visible width.
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
position: relative;
width: 100%;
background: green;
}
.content::before {
content: "";
display: inline-block;
height: 100%;
background-color: green;
position: absolute;
top: 0;
right: -100%;
left: -100%;
z-index: -1;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>
an idea using border-image
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
margin:0;
border-image: conic-gradient(green 0 0) fill 0//0 100vw;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>
Building an image slideshow, I have a container div of arbitrary size and aspect ratio into which I have to best fit an image, centred, with a caption overlayed at the bottom of the image and fitting its width. My best solution to date is to contain the image and the caption in a child element of the container but I'm having trouble centring it. This should be such a simple thing that I can't believe it's not staring me in the face but I can't see it. The code below uses a portrait format image but I need it to handle landscape also. I'm using React so jQuery is out.
.container {
position: relative;
width: 80%;
height: 48vw;
/* 4:3 */
margin: 0 auto;
display: flex;
justify-content: center;
}
.img-wrap {
background-color: #efe;
}
img {
position: absolute;
max-width: 100%;
max-height: 100%;
}
.caption {
position: absolute;
bottom: 0;
color: #fff;
background-color: rgba(153, 153, 153, 0.541)
}
<div class="container">
<div class="img-wrap">
<img src="https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-full-aesthetic-aurora-night-sky-background-skystarry-skystarnight-viewbackgroundstar-image_87582.jpg" height="1600px">
<div class="caption">Caption Content</div>
</div>
</div>
Update your code like below:
.container {
width: 80%;
height: 48vw;
/* 4:3 */
margin: 5px auto;
text-align: center;
}
.img-wrap {
background-color: #efe;
height: 100%;
display: inline-block;
position: relative;
}
img {
max-width: 100%;
height: 100%;
display: block;
object-fit: contain; /*or cover if you want to cover all the area*/
object-position: bottom;
}
.caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
color: #fff;
background-color: rgba(153, 153, 153, 0.541)
}
<div class="container">
<div class="img-wrap">
<img src="https://i.picsum.photos/id/10/400/600.jpg">
<div class="caption">Caption Content</div>
</div>
</div>
<div class="container">
<div class="img-wrap">
<img src="https://i.picsum.photos/id/10/600/300.jpg">
<div class="caption">Caption Content</div>
</div>
</div>
don't position absolute the image,
also if the caption is the sibling of the image,
set the size of the parent and set the image as 100% if the parent's width and height
then you can simply use the text-align: center on the caption to center it.
edit :
keep the existing style of a caption for positioning
fiddle : https://jsfiddle.net/hellooutlook/6ep4Lofz/4/
I'm trying to attach an "information div" to the left bottom edge of a fullscreen/centered/fitted image.
The image has to fit into the screen size (just like css property object-fit: contain does) and the information div should be attached to the bottom left side of the image.
Here is my css try (not even close) and here are three images to describe the wanted behavior!
Note: I'm looking for a CSS-only solution, so, please, no JS!
Edit: Attach div to a fullscreen image to the corner of another div with no predefined size / fullscreen.
* {
margin: 0;
padding: 0;
}
#out {
}
#in {
}
#info {
background-color: red;
color: white;
display: inline-block;
position: absolute;
bottom: 10px;
left: 10px;
}
img {
width: 100vw;
height: 100vh;
object-fit: contain;
}
<div id="out">
<div id="in">
<img src="https://images.unsplash.com/photo-1501630834273-4b5604d2ee31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
<div id="info">This is the image info!</div>
</div>
</div>
If I understand you correctly, you're looking for something like this? Open it fullscreen, resize the page, throw different images in there, cheers.
div {
border: red 1px dashed;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
div:after {
content: attr(data-overlay);
position: absolute;
bottom: 1rem;
left: 1rem;
color: white;
font-size: 2rem;
}
img {
object-fit: contain;
height: 100vh;
width: 100wh;
}
<div data-overlay="TEXT TEXT TEXT">
<img src="https://images.pexels.com/photos/1498923/pexels-photo-1498923.jpeg"/>
</div>
Wrap the image in a div that will be the relative parent of your info div.
section {
display: flex; /* centers everything in the section */
flex-direction: column;
align-items: center;
}
.image-wrap {
display: inline-block; /* keeps the wrapper div the same size as the child image */
position: relative; /* for positioning the info div */
}
.image-info {
position: absolute;
left: 10px;
bottom: 10px;
font-size: 18px;
text-transform: uppercase;
color: white;
}
<section>
<div class="image-wrap">
<img src="https://picsum.photos/200/300" />
<div class="image-info">Nice image</div>
</div>
<div class="image-wrap">
<img src="https://picsum.photos/300/200" />
<div class="image-info">This one is cool</div>
</div>
<div class="image-wrap">
<img src="https://picsum.photos/450/180" />
<div class="image-info">Pretty!</div>
</div>
</section>
you need to use Viewport unit
for that you need to set the size of your div.#out
which is width: 100vw; height: 100vh
Tried a few things(margin-auto, text align:center etc) to centre this relative div - which is the header in my responsive layout with no luck. Any other ways to try?
The problem is keeping it centered as the page expands/contracts
Its CSS properties are
#header {
height: 170px;
width: 100%;
overflow: visible;
padding: 10px;
margin-bottom: 7px;
position: relative;
z-index: 99;
}
How can a div appear visually centered when it's 100% width of its parent?
Check out this fiddle: https://jsfiddle.net/w6332ytc/
HTML:
<div class="wrapper">
<div class="inner">
Content
</div>
</div>
CSS:
.wrapper {
width: 100%;
background: #000;
height: 300px;
}
.inner {
width: 50%;
background: red;
margin: 0 auto;
}
I am trying to get an image horizontally and vertically centered within a div of variable height and width.
So far, so good.(See jsfiddle links below)
Now the catch is the image should also be responsive and adjust if either the height and/or width of the container is smaller than the images height or width.
After researching, going through all the different "solutions" out there and fiddling for a solution, I was unable to find the perfect one, however two came close:
1.) This first one does everything I need except when the window width is smaller than the image width, the image is no longer horizontally aligned:
http://jsfiddle.net/me2loveit2/ejbLp/8/
HTML
<div class="overlay">
<div class="helper"></div>
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
CSS
.helper {
height:50%;
width:100%;
margin-bottom:-240px;
min-height: 240px;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}
2.) This second example keeps everything aligned, but the image does not scale down when the height is less than the image height:
http://jsfiddle.net/me2loveit2/ejbLp/9/
HTML
<div id="outer">
<div id="container">
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
</div>
CSS
#outer {
height:100%;
width:100%;
display:table;
position:fixed;
top:0px;
left:0px;
background-color: rgba(0, 0, 0, 0.5);
}
#container {
vertical-align:middle;
display:table-cell;
max-width: 100%;
max-height: 100%;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display:block;
}
I have attempted this in the past and the only non-JS solution I've come up with (which is frowned upon, by the way) is this:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: table;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid #f00;
}
.container > div {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #00f;
max-width: 550px;
max-height: 480px;
background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
background-size: contain;
}
<div class="container"><div></div></div>
http://jsfiddle.net/pYzBf/1/
Set the background color of the div to black to see the scaling without the image edges. I used those dimensions so you can test it by resizing the frame.