I am working on a touch screen display for a museum. The screen will display old photos with touchable zones laid on top of it that reveal more information about people/objects show in the photos.
The screen size is fixed (it's a TV) but the photos could be in any aspect ratio; landscape or portrait.
There will be a header and footer at the top and bottom of the screen. In the middle I want to display the photo as large as possible. That is to say:
if the photo is portrait it should span the full height between the header and footer with empty space to the left and right.
if the photo is landscape (more landscape than the TV is) it should span the full width of the screen from left to right with empty space above and below.
This, I believe, is classic object-fit: contain; behaviour.
What I'm struggling with is adding the overlay on top. This consists of many rectangles that a user can touch. I know the top and left position and width and height of each box as a percent of the image it is overlaying.
I have made a tailwind playground here: https://play.tailwindcss.com/1c8QufeAFj
My understand is that I can't add the overlain boxes as children of the <img> tag, so they are placed in a <div> that is the <img> tag's sibling.
<!-- Check out the tailwind playground to see a live preview -->
<div class="flex h-screen flex-col">
<div id="header" class="bg-gray-500 p-6"><p>Header</p></div>
<!-- Main content which grows to fill the space between the header and footer -->
<main class="grow bg-gray-900">
<!-- Wrapper around the img and it's overlay -->
<div id="wrapper" class="relative">
<!-- The image: Should be as large as possible within main content (object contain style behaviour) -->
<img class="h-full w-full" src="https://placekitten.com/600/400" />
<!-- Div container boxes to draw on top of image (and move and scale with the image) -->
<div class="absolute inset-0 z-10">
<!-- Boxes overlaid on each kitten -->
<div style="left:48%; top:28%; width:11%; height:15%;" class="absolute border-2 border-orange-300"></div>
<div style="left:36%; top:29%; width:10%; height:14%;" class="absolute border-2 border-orange-300"></div>
<div style="left:16%; top:33%; width:10%; height:14%;" class="absolute border-2 border-orange-300"></div>
<div style="left:69%; top:43%; width:11%; height:15%;" class="absolute border-2 border-orange-300"></div>
</div>
</div>
</main>
<div id="footer" class="bg-gray-500 p-6"><p>Footer</p></div>
</div>
Since the boxes' positions and sizes are relative to the image, this sibling div must have the same size as the img at all times.
I can't get this to work with object-fit:contain; the sibling div that contains the boxes doesn't have the same size as the img so the boxes don't line up where they are supposed to.
If I try to find a solution without object-fit then I can either get it to work for portrait photos (using h-full) or landscape photos (using w-full) but I haven't managed to find code that works for both portrait and landscape.
I've encountered an annoying problem with Tailwind CSS on Nuxt3. Whenever I'm on mobile, the browser's nav menu causes the bg image to jump around, i.e: when the bottom navbar comes up for my mobile browser it causes the bg image to jump up (and jump down when it retracts).
Is there any way to tell mobile browsers I want the bg image to stay put?
The layout template:
<template>
<div class="w-full min-h-screen
bg-offblack
text-milk">
<div class="min-h-screen
overflow-y-auto overflow-hidden
grid grid-rows-1 grid-cols-1
justify-items-center
bg-fixed bg-right-bottom bg-no-repeat bg-[url('~/assets/images/ui/decker_mobile.png')]
md:grid-cols-2
lg:bg-[url('~/assets/images/ui/decker_desktop.png')]">
<slot />
</div>
</div>
</template>
I do not understand how to place a color transition effect over an image such as changing the color that will lay on top of the image when i hover over it. Basically i want a hover effect on my image, lets say to the color blue. I tried searching google for this but i cant find any answers to my question. Im new to tailwind but i did try hover:bg-blue-400 but it did not work, im currently using version 3 of tailwind. Here is an example
<div class="flex flex-col items-center rounded-2xl p-6">
<img src="./images/myImage.jpg" alt="image" class="hover:bg-blue-400">
</div>
The answer is make a div with the color of your choice then within that place
the img tag within it lets say hover:opacity-25 then your good. like so...
<div class="bg-blue-400 rounded-xl">
<img src="./image.jpg" alt="image" class="hover:opacity-25 rounded-xl">
</div>
I am trying to set my Login section's background opacity using bg-opacity-75, but when I add that to my className, background color will just disappear. And if I use opacity-75, all child-div will be transparent as it should, if I use opacity-100, background color will just disappear and only input field is visible, it's kinda wired. In addition, I'm using default tailwind.config file with tailwind v2.0.2.
Here's my code:
...
<div className={"h-screen w-screen py-10 lg:w-3/6"}>
<div
className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
<Logo/>
<Text/>
...
I aslo tried inline css, still not working.
using bg-opacity-75(there sholld be a white transparent area behind inputs)
I guess you are looking for something like this:
<div class="bg-green-400 h-32">
<div class="bg-gray-50 h-full w-6/12 mx-auto bg-opacity-50">
<div>Your Opacity child div here</div>
</div>
</div>
Opacity
Use opacity Keyword only, for version 2.2.7 Tails wind
example:
<div
className = "opacity-75 bg-red-300">
</div>
I have a layout with 2 columns : a left sidebar and a main content.
The sidebar is 25% of the total, (the main is 75% !).
In the main content bloc there should be an image with 6 areas (each 25% width of the full layout width).
The layout has to be fluid/responsive.
My problem is that obviously, when the viewport is not full width, the image is resized. But
the height of the sidebar doesn't follow the image height resizing.
For the moment, i've set a absolute positioned image . I haven't manage to set it correctly as (responsive) background image. The sidebar block height are obviously wrong (set to image height/2) but i don't see how to have responsive height (auto or 50%
the text in the blocks doesn't "follow" the image resizing
How can i achieve this ? I would like the solution to be valid for IE 8+. I know, i'm asking too much
I've done a jsfiddle to show the principle (there is no breakpoint here, at the moment)
<div id="page">
<div id="main">
<div id="main-content">
<div id="primary">
<div id="content">
<img src="http://s18.postimg.org/a8ary6c8p/image.gif" class="bgimg responsiveimg">
<div class="bloc bloc1">Content for bloc 1</div>
<div class="bloc bloc2">Content for bloc 2</div>
<div class="bloc bloc3">Content for bloc 3</div>
<div class="bloc bloc4">Content for bloc 4</div>
<div class="bloc bloc5">Content for bloc 5</div>
<div class="bloc bloc6">Content for bloc 6</div>
</div>
</div>
<div id="secondary">
<div class="sbloc sec_bloc1">Some content</div>
<div class="sbloc sec_bloc2">Some content</div>
</div>
</div>
</div>
<div id="footer">Some footer content</div>
</div>
I'm working on a Wordpress child template
----- EDIT -
Since the "real" image will be a actual picture of people (with a colored grid overimposed into the jpg - i'm not the graphist :( ), so it won't be an option.
The image will be responsive : no deformation but homothetic resizing.
i would like to have the sidebar responding to the height of the image (one image, not a repeated one), with each of two part of the sidebar (equal height), resizing to stay aligned with the grid on the image.
In fact my fiddle is questionnable, because the default viewport is small : i would like a responding version where the result is "always" like when the viewport is entirely stretched.
In order to keep the image aspect ratio, we need to set the height of each sidebar to match the height of the responsive image. I'm using jQuery here.
var h = $('.bgimg').height();
$('.sbloc').css('height', h);
Due to your complex layout 1 sidebar + 3 text blocks in a row, and 2 rows total. So the height of the container #content would be 2x of image height.
We need the inline image there with CSS set to max-width: 100%; height: auto; for responsiveness. But we actually set it to visibility: hidden; (hidden, but keep the space), instead we use the same image as background and set it to contain.
$('.bgimg').css('visibility', 'hidden');
$('#content').css({
'height' : h * 2,
'background' : 'url(http://s18.postimg.org/a8ary6c8p/image.gif)',
'background-size' : 'contain'
});
Then, we combine ready() + resize() functions, the entire script is:
$(document).ready(myfunction);
$(window).on('resize', myfunction);
function myfunction() {
var h = $('.bgimg').height();
$('.sbloc').css('height', h);
$('.bgimg').css('visibility', 'hidden');
$('#content').css({
'height' : h * 2,
'background' : 'url(http://s18.postimg.org/a8ary6c8p/image.gif)',
'background-size' : 'contain'
});
}
Lastly, remove the background color from the blocks, as we use background image.
.bloc1, .bloc3, .bloc5{/* background-color: red */}
.bloc2, .bloc4, .bloc6{/* background-color: green */}
jsfiddle
EDIT
The only image should cover the the entire content area (two rows). Minimal jQuery code update as needed.
$(document).ready(myfunction);
$(window).on('resize', myfunction);
function myfunction() {
var h = $('.bgimg').height();
$('.sbloc').css('height', h / 2);
$('.bgimg').css('visibility', 'hidden');
$('#content').css({
'height' : h,
'background' : 'url(http://s18.postimg.org/a8ary6c8p/image.gif)',
'background-size' : 'contain'
});
}
jsfiddle