How to React Player fit in div box?
My code is like this but the React Video doesn't fit box like photo
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Top.js
{camera.map((item,i) =>
<div key={i} className="discover_device col-4">
<div className="box_dicover_camera">
<Link className="box_dicover_camera_link" to={`/camera_detail_condo/${item.entity_id}`}>
<ReactPlayer
className="camera_video_discover"
url={'xxx.com'}
controls={false}
playing
muted
config={{
file: {
hlsOptions: {
xhrSetup: (xhr) => {
xhr.setRequestHeader('Authorization', `Bearer ${cookies.get('accesstoken')}`);
},
},
},
}} />
</Link>
<div className="discover_item_room_name_entity_id">
<p className="discover_item_room_name_carmera">{item.room_name}</p>
<p className="discover_item_entity_id_camera">{item.entity_id}</p>
</div>
</div>
App.css
.box_dicover_camera {
position: relative;
background:#1E3E75;
padding:15px;
border-radius: 10px;
margin-bottom: 30px;
width: 340px;
height: 300px;
}
.box_dicover_camera .camera_video_discover {
object-fit: cover !important;
position: absolute !important;
}
.camera_video_discover video {
position: relative !important;
left: 0 !important;
top: 0 !important;
transform: none !important;
}
I want to fit the video in box_dicover_camera.
The ideal one is the following photo.
The video fulfills the box_dicover_camera.
(I hide the video with red square so just ignore it)
<div className="box_dicover_camera">
<ReactPlayer
className="camera_video_discover"/>
</div>
.box_dicover_camera {
border-radius: 10px;
margin-bottom: 30px;
width: 340px;
height: 300px;
background: blue;
display: flex;
align-items: center;
justify-content: center;
}
.box_dicover_camera .camera_video_discover {
width: 100%;
height: 100%;
}
Note that if you want the video to fit the entire blue area, it will need to have a corresponding ratio (width/height being the same as 340/300 of blue square).
The following is correct
.camera_video_discover video {
object-fit: cover;
border-radius: 10px;
position: relative !important;
left: 0 !important;
top: 0 !important;
transform: none !important;
width: 340px !important;
height: 300px !important;
}
Related
Here is how my header is represented
If I click on the cross
The image quality of the logo is really very low
I would just like to know if it is possible to increase the size of the logo and delete the title of the logo.
Is it possible to do this?
dashboard.component.html
<div class="sidebar" [class.sidebar-close]="!openSidebar">
<div class="logo-details">
<img src="https://zupimages.net/up/22/42/fxvl.png" />
</div>
...
styles.css
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: white;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.sidebar-close {
width: 60px;
}
.sidebar .logo-details {
width: 100%;
padding: 10px 10px 10px 10px;
}
.sidebar .logo-details img {
height: 50px;
width: 80%;
display: block;
margin: 0 auto;
}
...
I can send you an illustration via Stackblitz here
Thank you very much for your help.
Here's roughly what you need to do. The image must have a wrapper, the property of which is not to show cropped parts of the image. You can position the image itself inside the wrapper in any way convenient for you.
.wrapper {
overflow: hidden;
box-shadow: 0 0 40px black;
width: 180px;
height: 120px;
}
.wrapper img {
transform: scale(1.2) translateX(-65px);
}
<div class="wrapper">
<img src="https://zupimages.net/up/22/42/fxvl.png">
</div>
I know there are a LOT of examples of this, and I have tried all of them to no avail. I am trying to create a carousel component that resizes images according to its boundary. I am using it in a myriad of places, in a myriad of different ways, so it MUST be responsive. I also need the images to be clickable as normal images for a11y and customers (managing expectations).
Here is my fiddle so far: https://codepen.io/skamansam/pen/NWvroeY?editors=1100
I can get all of the elements to resize accordingly (using max-width/height). when I use an image that is wider than taller, all works well. When I use an image that is taller than wider and exceeds the height of the box, the image overflows instead of respecting the max-width/height properties.
The most common answer involves wrapping the image in an html element and setting the width/height there, which I have done, but it doesn't solve the problem. Another common answer involves using combinations of position values, which didn't give any better results than I already have. Using the inspector, you can clearly see that all the elements EXCEPT the image are correctly sized, and the image overflows the container.
Is there any other way to get the img tag to respect height: 100% in the same way it respects width: 100%?
you are using image with a very high resolution (500x800) , you have use little lower resolution otherwise you have to use overflow:hidden; on your wrapping div.Using max-width:100%; the image is already resizing itself but cannot resize further more, inspect the element to get a better understanding.
I made three changes:
Your slide needs width: auto; and height: 100%;
Your image needs width: 100%; and height: 100%;
Your image needs object-fit: contain; (not cover)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.jumbotron {
display: block;
width: 100%;
margin: 0;
padding: 0;
background-color: #aaa;
/* overflow: hidden; */
height: 150px;
}
.jumbotron .container {
width: 100%;
height: 100%;
}
.my-carousel {
background-color: #77f;
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
// overflow: hidden;
}
.my-carousel .previous-btn, .my-carousel .next-btn {
font-size: 200%;
padding: 0px 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.my-carousel .content {
max-height: 100%;
max-width: 100%;
align-self: center;
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.my-carousel .content .slide {
height: 100%;
//max-width: 100%;
display: none;
position: relative;
// width: 100%;
vertical-align: middle;
padding: 0px;
margin: 0px;
overflow: visible;
}
.my-carousel .content .slide.active {
display: block;
}
.my-carousel .content .slide img {
//position: relative;
// margin: 0px auto;
// box-sizing: border-box;
// vertical-align: middle;
height: 100%;
width: 100%;
// max-width: 100%;
// max-height: 100%;
object-fit: contain;
object-position: center;
overflow: hidden;
}
.my-carousel .content .slide .caption {
position: absolute;
background-color: rgba(0,0,0,.4);
text-shadow: 2px 2px 4px #fff, -2px -2px 4px #fff;
stroke: 2px #fff;
padding: 10px;
bottom: 0px;
width: 100%;
font-size: 150%;
// color: #000;
// -webkit-text-stroke-width: 1px;
// -webkit-text-stroke-color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.3.95/css/materialdesignicons.min.css" rel="stylesheet"/>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<div class="my-carousel">
<div class="previous-btn">
<span class="mdi mdi-transfer-left"></span>
</div>
<div class="content">
<div class="slide active">
<img src="https://picsum.photos/500/800?random=1" />
<div class="caption">This is only a WIP to figure out how to style this carousel properly.</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1000/400?random=1" />
</div>
</div>
<div class="next-btn">
<span class="mdi mdi-transfer-right" />
</div>
</div>
</div>
</section>
</main>
luckily, the answer is inside "picksum" itself, it allows you to choose the resolution of the image you want, you chose (500x800) that is way too large, you can use the following reduced resolutions >(50x80), (100x160), (180x288), (190x304), (200x320). I am sure you will get your desired result by using (180x288) or (190x304)
for example:<img src="https://picsum.photos/190/304?random=1" />
Use max-width and max-height
Like this
.slide {
width: 100px;
height: 100px;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.slide .img {
max-width: 100%;
max-height: 100%;
}
I have set up a carousel with a display flex:1 the idea being to make it take up as much height as available to it which works as intended(can be tested by setting a fixed height for the div(.image-iframeContainer) contained in it). but whenever I try and set this div to be 100% of the carousel height instead of the content scaling to fit the size of the carousel, the carousel will instead scale to the 100% of the size of the content(test this by stretching the aspect ratio). how do I fix/stop this happening?
reactjs
<div className="Cards">
<Carousel
showThumbs={false}
infiniteLoop={true}
swipeable={false}
dynamicHeight={false}
>
<div>
<div className="image-iframeContainer">
<img src={IMG} />
</div>
</div>
<div>
<div className="image-iframeContainer">
<img src={IMG} />
</div>
</div>
<div>
<div className="image-iframeContainer">
<img src={IMG} />
</div>
</div>
</Carousel>
<h1>{Projects.workName}</h1>
{Projects.workTech.map((Tech, index) => {
return <p>Technology used: {Tech}</p>;
})}
<p>{Projects.workDescription}</p>
</div>
Sass
.Cards {
position: absolute;
width: 50%;
height: 80%;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.2);
margin-left: auto;
margin-right: auto;
margin-top: 10%;
left: 0;
right: 0;
border-radius: 7px;
overflow: hidden;
background: #7510f7;
display: flex;
flex-direction: column;
.image-iframeContainer {
display: flex;
width: 100%;
//setting a fixed height for this div allows for flex scaling of the carousel
height: 400px;
//height: 100%;
background: greenyellow;
overflow: hidden;
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: cover;
background-repeat: no-repeat;
margin: auto;
}
iframe {
position: absolute;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100px;
border: 0;
}
}
.carousel-root{
flex:1;
}
.carousel {
z-index: 0;
}
.carousel, .slider-wrapper, .slider {
height: 100%;
}
.slide{
display: flex;
justify-content: center;
}
.carousel.carousel-slider {
.control-arrow {
padding: 15%;
opacity: 0%;
}
}
}
sandbox link
https://codesandbox.io/s/sleepy-sunset-jqjst?file=/src/styles.scss:478-500
To avoid confusion these are swipe cards layered on top of each other hence the absolute positioning, in my actual project images are injected dynamically I do not want to crop or stretch images this is why I've picked this implementation with borders the containing div will give back colour to the bezels around the picture.
I have a page that will display an image (just a green div placeholder for now). I want to slide a div in from the right which will be a comments box and keep the image centred in the remaining space. If the image is too large for this remaining space I want to allow the user to scroll over the image horizontally.
I have this:
var showingComments = false;
$("#clickme").click(function() {
if (showingComments == false) {
showingComments = true;
$(this).parent().animate({
right: '0px'
}, {
queue: false,
duration: 500
});
} else {
showingComments = false;
$(this).parent().animate({
right: '-150px'
}, {
queue: false,
duration: 500
});
}
});
#Picture_container {
width: auto;
background-color: yellow;
overflow-x: auto;
}
#thePicture {
height: 300px;
width: 400px;
/* this will change when the page loads */
background-color: green;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
}
#commentsBox {
background: #00FFFF;
position: absolute;
width: 150px;
height: 400px;
right: -150px;
top: 10px;
}
#clickme {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 400px;
background: #5F9EA0;
text-align: center;
transform: rotate(90deg);
transform-origin: left top 0;
}
#comments {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='Picture_container'>
picture container
<div id='thePicture'>
the picture goes here
</div>
</div>
<div id="commentsBox">
<div id="comments">
I am a sticky-out comments box
</div>
<div id="clickme">
click me!
</div>
</div>
Example: https://jsfiddle.net/fwwfe2q6/
As you can see the comments box pops out but it overlaps the image holder div instead of making it move left. Can you suggest how to centre the green div (representing the image) in both the expanded and collapsed state of the comments box, and have the green div horizontally scrollable when it is too large to fit the window along with the expanded comments box?
You may use flex and rethink structure:
body {margin:0;}
#Picture_container {
display: flex;
flex-wrap: wrap;
height: 100vh;
max-width: 700px;
transition: 0.5s;
margin: auto;
background: yellow;
text-align: center;
}
#thePicture {
display: flex;
flex-wrap: wrap;
flex: 1;
overflow: auto;
}
#thePicture img {
flex-shrink: 0;
margin: auto;
max-height: 75vh;
}
p, [for="mw100"] {
width: 100%;
}
p {
background: turquoise;
padding: 1em;
margin: 0;
}
#commentsBox {
display: flex;
background: tomato;
overflow: hidden;
}
#test,
#full,
#mw100 {
position: absolute;
right: 100%;
}
#commentsBox label {
display: block;
background: tomato;
width: 2em;
margin: 1em 0 0 0em;
white-space: nowrap;
transform: rotate(90deg);
cursor: pointer;
}
#commentsBox label:before {
content: '';
position: absolute;
width: 2em;
height: 100vh;
display: block;
}
#clickme {
background: purple;
width: 200px;
margin-right: -200px;
transition: 0.1s;
}
label {
font-size: 1.2em;
font-weight: bold;
color: white;
text-shadow: 0 0 2px black;
}
#test:checked~#clickme {
margin-right: 0;
}
#full:checked~#Picture_container {
max-width: 100%;
}
#mw100:checked~img {
max-width: 95%;
}
<input type="checkbox" id="full" />
<div id='Picture_container'>
<p>picture container <label for="full">Toggle me full or 700px width</label></p>
<div id='thePicture'>
<input id="mw100" type="checkbox" /><label for="mw100">toggle image overflow</label>
<img src="http://dummyimage.com/1800x1000/00ff00&text=the picture goes here" />
</div>
<div id="commentsBox">
<input type="checkbox" id="test" />
<div id="comments">
<label for="test">To show comments- click me!</label>
</div>
<div id="clickme">
Shown comments here.
</div>
</div>
Snippet propose a few option depending on expected result.
full width or max-width on container
container holding image overflowing or image with max-width
labels and imputs only for demo, use js for the slidding box .
a tutorial/reminder about flex i find usefull : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have trouble coding a 1px horizontal seperator line with a logo displayed in the center as pure CSS. Should look like this:
Divider with logo centered
There is a problem with multiple instances: When I add more dividers on a single page only one or two will be displayed with a line, the others will just display the logo.
A question about a centered logo was answered here - but none adressed the bug that happens with multiple instances: Divider with centred image in CSS?
Here is a adapted solution out of that discussion, fiddle below.
CSS:
body {
margin: 0;
background: white;
}
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
HTML:
<body>
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
</body>
The fiddle:
http://jsbin.com/delixecobi/edit?html,css,output
I totally changed the CSS. Give the .logo a position: relative and :after a position: absolute. You are using it for one single header. That's why it didn't work.
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
Preview
If you want the line not to cross or cut, use a negative z-index.
I found a solution also for my question how to get text centered within the div - thanks to web-tiki for his approach here: Line before and after title over image
In the JSBin I put all together and formatted / commented it a bit to make it easy to work with. You will find:
divider formats with img, text and text in multiple lines
stable in multiple instances
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
z-index: -1;
}
.logo {
position: relative;
/* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 20px;
/* also padding between line and logo */
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
.logotext {
width: 100%;
margin: 20 auto;
overflow: hidden;
text-align: center;
font-weight: 300;
color: green;
/* color text */
}
.logotext:before,
.logotext:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 20 0 -55%;
/* 2nd no: space text to line on the left */
vertical-align: middle;
border-bottom: 1px solid #ccc;
/* last: color line */
}
.logotext:after {
margin: 0 -55% 0 20;
/* last no: space text to line on the right */
}
span {
display: inline-block;
vertical-align: middle;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logotext">
somesome</div>
<div class="logotext">
somesome</div>
</header>
One major drawback to this solution is that it does not allow the width of the line to be defined to % of the main viewport.