How to set properties of background image in reactJS - javascript

I was able to get the background of my header container to show an image. However, i dont k ow how to set the size of the BACKGROUND IMAGE. SO what appears in the heading container just shows a image that is too big to appear in the header container.
I tried to search online
Change the sizes of the containers using vh and vw
Using Inline styles
//App.js
import React from "react";
import NavBar from "./NavBar";
const ContactUs = () => {
return(
<div className="contactUsContainer">
<NavBar/>
<div className="contactUsHeader">
<h2>Contact Us</h2>
</div>
<div>
<span></span>
</div>
</div>
);
}
export default ContactUs;
//app.css
.contactUsContainer {
height: 100%;
width: 100%
}
.contactUsHeader {
display: flex;
flex-direction: column;
align-items: center;
background-image: url("http://www.stapl.co.in/sites/default/files/imagecache/full-zoom/files/projects/6/83/6-83-wartsilla-3.jpg");
background-repeat: no-repeat;
background-size: cover;
height:30vh;
width: 100vw;
background-color: blue
}
Expected Result: background image to show full image, just in smaller size
Actual Result: background image shows very big, which omits much of the image content

The best you can do without any dirty JS is:
background-size: cover;
background-position: center;
Then you just need to pick the right ratio for your image

Related

How to position a div inside another div in reactJs?

I want to put the children div on end of parent div , but positioning is not working. i'm using reactJs, NextJs and styled-components for this code;
reactjs code:
<a href={links[indexImg]} target="_blank" >
<Carousel
image={images[indexImg]}
>
<DescriptionText>
<p>{descriptions[indexImg]}</p>
</DescriptionText>
</Carousel>
</a>
styled-componentes code:
export const DescriptionText = styled.div`
color: white;
background-color: black;
background-position: 20px;
opacity: 0.5;
`;
export const Carousel = styled.div`
position: relative;
border-radius: 50px;
border: solid;
border-width: 3px;
border-color: #C2C2C2;
margin: 0;
height: 100%;
width: 100%;
justify-content: flex-end;
background-size: cover;
background-position: center;
background-image:url(${props => props.image});
`;
If your .inner division has a position of absolute and your .outer one gets position relative, the .inner division will adjust itself inside the .outer one. For example: if you want the .inner one to stick to the bottom of the .outer one you can do this:
.outer {
position: relative
}
.inner {
postion: absolute;
bottom: 0
}
first of all install bootstrap from terminal using the command
npm install react-bootstrap bootstrap
suppose you are working with components like Leftsidebar.js , Rightsidebar.js and Content.js which you have imported to index.js
to do this you have install bootstrap in your react.js
follow the steps
index.js blow
import React from 'react';
import ReactDom from 'react-dom';
import Leftsidebar from './Leftsidebar';
import Rightsidebar from './Rightsidebar';
import Content from './Content';
ReactDom.render(
// outer most div
<div class='row'>
<div class='col-4'>
<Leftsidebar/>
</div>
<div class='col-4'>
<Content/>
</div>
<div class='col-4'>
<Rightsidebar/>
</div>
</div>
,documment.getelementbyId('root');
);
simple we have used the grid system to divide the screen into 4 different part out of 12 secondly the above code is just typed in the text editor .but my aim was to guide you how to show data in different layout or positions using react js and it work because i myself use row column to arrange data in position and it is the easiest method .

Creating responsive 'Image Map' for elements to match elements of background image (JS/CSS) (React) [duplicate]

I'm trying to create a map of button elements that overlay a full-screen image, positioned over all the 'buttons' depicted on the image. When the image resizes, the button elements should resize as well.
I initially used an SVG image map for this, but it had a positioning bug (the link below) that didn't allow for the video player inside the foreignObject to show.
SVG foreignObject and absolute positioning
I figured using absolute positioning, and JS to measure the width of the background image was the best way to go. However, I'm having trouble making it work.
Below is the project, with the white box needing to be positioned over the background image (the entire box, with chocolates, and the screen).
The image is within a div as a background, like so:
export const BackgroundLightsOn = styled.div`
position: absolute;
background: url(${BgLightsOn});
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
border: 1px solid red;
`
Unfortunately, getting the dimensions of this DOM element gets the dimensions of the div, not the image (which is sometimes larger than the viewport). Below is the 'resizing' code, but this connects to backgroundRef (which is the div element the image is the background, not the image itself).
import React, { useEffect, useRef } from 'react';
import {
TruffleTinContainer,
TruffleTinOutside,
} from '../truffle-tin/styledTruffleTin';
export default function TruffleTin({ backgroundRef }) {
const truffleTinRef = useRef();
const initialPos = { x: 150, y: 150 };
const padding = 25;
let truffleBoxWidth = 0;
let truffleBoxHeight = 0;
useEffect(() => {
truffleBoxWidth = truffleTinRef.current.offsetWidth;
truffleBoxHeight = truffleTinRef.current.offsetHeight;
resize();
}, []);
function resize() {
let backgroundDivRect = backgroundRef.current.getBoundingClientRect();
truffleTinRef.current.style.left =
(initialPos.x / truffleBoxWidth) * backgroundDivRect.width -
padding +
'px';
truffleTinRef.current.style.top =
(initialPos.y / truffleBoxHeight) * backgroundDivRect.height -
padding +
'px';
}
useEffect(() => {
window.addEventListener('resize', resize);
return () => window.removeEventListener('resize', resize);
});
return (
<TruffleTinContainer ref={truffleTinRef}>
I'm the truffle tin
</TruffleTinContainer>
);
}
See the GIF below for the issue:
What's the best way to get this div to proportionally match the width of the background image?
(Edit: I changed the 'div with image background' to an img tag, but even then, the getBoundingClientRect shows not the width of the image, but the width of the viewport:
(in other words, even though the image is much wider than the viewport, I'm still getting the viewports dimensions, when what I want is the image's dimensions))
You don't need JS for that. This is achieved with plain CSS, all you need is the button center positions relative to left-top corner of the block. Sample HTML/CSS:
<div class='wrapper'> <!-- Will need this later -->
<div class='container'>
<a class='button' style='--left: 25%; --top: 20%'>1</a>
<a class='button' style='--left: 35%; --top: 80%'>2</a>
</div>
</div>
.container{
position: relative;
background: url('/path/to/image');
background-size: 100% auto;
}
.button{
position: absolute;
left: var(--left);
top: var(--top);
transform: translate(-50%, -50%); /* Move button a bit so its center matches the actual position */
/* These are just for visualization */
width: 50px;
height: 50px;
border-radius: 100%;
background: pink;
display: flex; align-items: center; justify-content: center;
}
The next step is to make .container have a constant width, or at least a constant width/height ratio if you care about vertical resizing. The constant width is achieved with a simple min-width. To avoid horizontal scroll we will add a .wrapper to hide the cut-off sides:
.wrapper{
display: flex;
align-items: center;
max-width: 100%;
overflow: hidden;
}
/* A-and a min-width for .container */
.container{
min-width: 1200px; /* Or whatever */
}
If you need a fixed ratio:
.container::before{
content: '';
display: block;
padding-top: 56.25%; /* 56.25% of the parent width this is, ratio 16x9 */
}
min-width can still be applied if needed. There's an aspect-ratio CSS property that can be used instead of that pseudo-element hack, but it is supported only in relatively fresh browser versions; still might be used if you don't plan supporting a little outdated browsers.

Making "View" fill upp entire screen in React Native

I am working on a React-native project and stumbled upon issues when setting width and height using percentage values to a View. I have tried to set width: 100% and height: 100% but this does not work.
function CalendarPage() {
return (
<MainWrapper>
<SafeAreaView style={styles.container}>
<ScrollView>
<StyleContentWrapper>
<Paragraph> Hello World! </Paragraph>
</StyleContentWrapper>
</ScrollView>
</SafeAreaView>
</MainWrapper>
);
}
const MainWrapper = styled.View`
flex: 1;
justify-content: center;
align-items: center;
background-color: lightgray;
color: white;
`
const StyleContentWrapper = styled.View`
height: 100%; // this does not work
width: 100%; // this does not work
background-color: red;
padding-top: 40px;
padding-horizontal: 20px;
`
A quick explaination for the components:
MainWrapper covers the entire screen and is the base layer. The reason why it nests SafeAreaView is because this allows me to set a background color on the "safe area".
I have also nested another view called StyleContentWrapperinside a ScrollView, because I want everything inside to be scrollable.
This is the results
StyledContentWrapper or The red box does not cover the entire screen, despite having the styles of width: 100% and height: 100%. Why is this? Setting fixed width and height does work, but this is not the approach I want, because different devices has different widths and heights, and I want it to work for multiple screens with different widths and heights, hence the use of perecentage.
How can I solve this?

crop background image and scale as window resizes

I am currently attempting to create a hero image on the home page of my react application. The issue I am running into is how the image currently sits.
currently the image sits a bit more centered than I would like, I am trying to duplicate something like this(please ignore the card in front of the background image):
I am unsure of how to position the background image further to the right and down a bit without there being white-space or it looking wonky on larger screens. I would also like the image to translate to the left as a screen is resized. The code I have attempted is as follows:
JSX
import React from 'react'
const Home = () => {
return (
<div className='h-o'>
<div className='h-i'></div>
</div>
)
}
export default Home
CSS:
.h-o {
top: 181px;
left: -44px;
width: 100%;
height: 644px;
background: transparent url('../../Assets/Images/miami-courthouse.jpg') 0% 0%
no-repeat padding-box;
opacity: 1;
}
attached is a code sandbox https://codesandbox.io/s/keen-montalcini-plwgc?file=/src/styles.css
To achieve what you want, you need to set transform-origin: top left for scale top left corner and set parent div as overflow: hidden; to keep it size
.img-wrapper {
display: inline-block;
overflow: hidden;
}
img.resize {
transform-origin: top left;
transform:scale(1.1);
-ms-transform:scale(1.1); /* IE 9 */
-moz-transform:scale(1.1); /* Firefox */
-webkit-transform:scale(1.1); /* Safari and Chrome */
-o-transform:scale(1.1); /* Opera */
}
<div class="img-wrapper">
<img src="https://i.imgur.com/aDExJLE.png" />
</div>
<div class="img-wrapper">
<img class="resize" src="https://i.imgur.com/aDExJLE.png" />
</div>

Resizing images with object-fit:contain in flexbox only works in Firefox

I'm trying to build a photo mosaic using flexbox and object-fit: contain by changing the line height (and thus adjusting width keeping the aspect ratio).
This works well in Firefox, however not in Chrome, iExplorer, Edge, where the images shrink in place. While the images are adjusted in size, the spacing is increased.
I made an example in JSFiddle with the following Code where
container is a line of images
image1/2 are the images in a container
img contains the actual picture
HTML
<div id=container class=lContainer>
<div id=image1 class=imageThumb>
<img src="http://lorempixel.com/300/200">
</div>
<div id=image1 class=imageThumb>
<img src="http://lorempixel.com/300/200">
</div>
</div>
CSS
.lContainer {
display: flex;
justify-content: center;
width: auto;
}
.imageThumb {
height: 100%;
padding: 2px;
}
img {
object-fit: contain;
height: 100%;
width: auto;
min-width: auto;
}
JS (resizing the pictures to show the effect)
$(document).ready(function() {
var divID = document.getElementById('\container')
var el = $(divID);
curHeight = 200
goalHeight = 150;
el.height(curHeight).animate({
height: goalHeight
}, 600, function() {
el.css('height', goalHeight);
$(el).css("opacity", 0.99);
console.log("done")
});
});
I noticed that toggling padding on the image in Chrome yields the intended result (e.g. the page is not loaded correctly, if I toggle padding off / on in the inspector, the result changes to the intended one).
Using an online autoprefixer to account for the other browsers does not change a thing.
What am I missing? Thanks for your help!

Categories

Resources