The slide div is part of a carousel with images that are different in size or aspect ratio. How can I center the background image whatever the sizes might be without losing its quality? The code that I wrote is perfect for a normal size image, but if the image is smaller (30px by 30px) it will be stretched to match the div's width or height.
<div class="slide"></div>
.slide {
width: 100%;
height: 400px;
background-image: url('./assets/img4.jpeg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
border: 1px solid red;
}
You can use a container (.imagecont):
.container {
width: 10em;
border: 1px solid black;
}
.imagecont {
position: relative;
width: 10em;
height: 10em;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 10em;
max-height: 10em;
margin: auto;
}
<div class="container">
<div class="imagecont">
<img src="https://google.com/favicon.ico">
</div>
<div class="imagecont">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
</div>
Version with variable width (try resizing the container with mouse)
.container {
border: 1px solid black;
width: 5em;
resize: horizontal;
-moz-resize: horizontal;
overflow: hidden;
}
.imagecont {
position: relative;
height: 10em;
max-width: 100%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
}
<div class="container">
<div class="imagecont">
<img src="https://google.com/favicon.ico">
</div>
<div class="imagecont">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
</div>
Related
I have a requirement to make a banner that is 50% of the width of the "content wrapper" and that content wrapper is dynamically sized to a max width (so it can be, in theory, 0px-1330px). The content wrapper is the dark gray box here. It contains the content of the site. Within that content is a banner that comes out from the side of window. The window in this exactly has a boundary of the black outline.
How with HTML/CSS can I make the content of the purple container fit within the dark "content wrapper" even tho it is 50% of the window and the content lines up with left side of the wrapper when I don't know the specific width.
I've tried all kinds of math but I can't quite get it. I'm using CSS vars for the site max width and I can use var or calc to make this work but just no combo is working.
Does this fit your question?
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
width: 100%;
max-width: 500px;
height: 100vh;
margin: auto;
background-color: #aaa;
}
.banner {
width: 50%;
background-color: #a0f;
padding: 20px 20px 20px 0;
position: relative;
box-sizing: border-box;
}
.banner::before {
content: '';
position: absolute;
background-color: #a0f;
top: 0;
left: calc(100% - 50vw);
height: 100%;
width: calc(50vw - 100%);
}
<div class="wrap">
<h1>Content Wrapper</h1>
<div class="banner-wrap">
<div class="banner">
<h2>The title here</h2>
<p>Some other text here</p>
</div>
</div>
</div>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
overflow: hidden;
}
.window {
width: 100%;
height: 100vh;
border: 2px black solid;
background-color: lightgrey;
display: grid;
align-items: center;
justify-items: center;
}
.wrapper {
height: 75%;
width: 80%;
background-color: darkgrey;
padding:20px 0px;
}
.content {
padding: 20px 0px;
position: relative;
width:50%;
}
p{
position: relative;
z-index:2;
color:white;
}
.banner-container {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
clip-path:inset( -100vw 0vw -100vw -100vw );
}
.banner {
height: 100%;
width: 150vw;
position: absolute;
top: 0px;
left: -50vw;
background-color: purple;
}
<div class="window">
<div class="wrapper">
<div class="content">
<p><b>Some text here</b></p>
<p>Some text here</p>
<div class="banner-container">
<div class="banner">
</div>
</div>
</div>
</div>
</div>
I have been able to create a centered vertical line but it increases my webpage width off of my screen! I would like some insight on how I can create a centered vertical line down my page while keeping page width to fit my screen (so that there is no horizontal scroll bar).
When I have removed the line my page width is perfect therefore I do not think it is one of my divs causing the problem.
body {
background-color: lightblue
}
.vertical_line {
border-left: 6px solid black;
height: 500px;
position: relative;
left: 50%;
margin-left: auto;
z-index: -1;
}
.section-2 {
width: 100%;
height: 200px;
}
.section-3 {
position: relative;
top: 50;
width: 500px;
height: 60%;
padding: 20px;
margin-left: auto;
margin-right: auto;
background-color: green;
}
<section class="section-2">
<div class="topnav">
<a style="background-color:grey; width:100px">this is my nav bar</a>
</div>
<div class="vertical_line"></div>
</section>
<section class="section-3">
<div class="paragraph"></div>
</section>
<div class="vertical_line"></div>
Problem arises because you used position: relative; and shifted it 50% left, but it means element is still part of flow and shifting it pushes it past the edge of the screen. On the other hand position absolute removes it from the flow. But if you want to use position: relative; for some reason, then add overflow-x : hidden; in the body, it will work fine in your case. Also a good CSS reset always helps, so as you do not get unexpected scrollbars.
* {
padding: 0px;
margin: 0px;
}
body {
background-color: lightblue;
width: 100%;
min-height: 100vh;
}
.vertical_line {
border-left: 6px solid black;
height: 500px;
position: absolute;
left: 50%;
margin-left: auto;
z-index: -1;
}
.section-2 {
width: 100%;
height: 200px;
}
.section-3 {
position: relative;
top: 50;
width: 500px;
height: 60%;
padding: 20px;
margin-left: auto;
margin-right: auto;
background-color: green;
}
<html>
<section class="section-2">
<div class="topnav">
<a style="background-color:grey; width:100px">this is my nav bar</a>
</div>
<div class="vertical_line"></div>
</section>
<section class="section-3">
<div class="paragraph"></div>
</section>
<div class="vertical_line"></div>
</html>
With help of overflow-x: hidden; and position : relative; :
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
min-height: 100vh;
overflow-x: hidden;
}
.vl {
border-left: 6px solid black;
height: 5000px;
position: relative;
left: 50%;
}
<html>
<body>
<h2>Vertical Line</h2>
<div class="vl"></div>
</body>
</html>
I am creating my own lightbox with React and I want to set width on div with class .lightbox-active depending on image width. For now, I have set max-width: 50%; max-height: 80% for parent element and when e.g. the image is filling only 43% of parent element I want to set 43% width for a parent. Is there any way to achieve this without calculating the width in js?
<div className="lightbox-active">
<img onLoad={() => isFinished()} src={fakeImages[openedImage - 1].url} alt="" />
</div>
My image has got property object-fit: contain and I need this for display image in original proportions, without this image is filling 50% width as it's parent but overflowing height.
Working example:
https://codepen.io/freestyle09/pen/rNNdNNg
Border green should have sizes like an image
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.lightbox {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
}
.lightbox-active {
display: flex;
justify-content: center;
max-width: 50%;
max-height: 80%;
border: 1px solid red;
}
.lightbox-active img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border: 2px solid green;
}
<div class="lightbox">
<div class="lightbox-active">
<img src='https://picsum.photos/1503/1500' alt="" />
</div>
</div>
I have a solution, which can be achieved using position: absolute . It can work for you as you want.
You have to modify the css of .lightbox-active and .lightbox-active img to use absolute positioning.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.lightbox {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
}
.lightbox-active {
max-width: 50%;
max-height: 80%;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.lightbox-active img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border: 2px solid green;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div class="lightbox">
<div class="lightbox-active">
<img src='https://picsum.photos/1503/1500' alt="" />
</div>
</div>
Using inline block and overflow hidden can solve your issue to some extent. But the image will be cropped at the bottom if image is larger than available space.
Refer the code snippet below.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.lightbox {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
}
.lightbox-active {
display: inline-block;
overflow:hidden;
justify-content: center;
max-width: 50%;
max-height: 80%;
border: 1px solid red;
}
.lightbox-active img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border: 2px solid green;
}
<div class="lightbox">
<div class="lightbox-active">
<img src='https://picsum.photos/1503/1500' alt="" />
</div>
</div>
How can I position a textarea at the bottom of the parent div and also make the textarea the same width?
The problem I have now is that the textarea expands all the way to the right side of the page.
Html
html,
body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Here is a simple example of the problem that I have: https://jsfiddle.net/hu45v46p/1/
How can this be solved with html and css?
Instead of position: fixed, you want to give it position: absolute.
By default, it will be slightly larger than the blue box (because of the borders). You can accommodate for this with width: calc(100% - 6px):
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
width: calc(100% - 6px);
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Hope this helps! :)
Check out the code below.
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.blue {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<div class="blue">
<p>Textarea should be placed at bottom of the 'blue' div, with the same width</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
</div>
position: fixed; is relative to your viewport which is why you're getting those results for the textarea.
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
/*fixed to absolute*/
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Changed the value of the position property to absolutefor the .bottom div and added some basic CSS browser reset * {margin: 0; padding: 0; box-sizing: border-box} which fits the textarea nicely inside the .middle div:
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
I create a menubar and make it transparent and I add an image in my container div to look image behind menubar after this when I create another div it overlapping each other I want second div visible below container div
* {
margin: 0;
padding: 0;
}
.top_nav {
height: 80px;
width: 100%;
background: rgba(0, 0, 0, .5);
position: relative;
}
.container {
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img {
width: 100%;
height: 638px;
}
.details {
height: 638px;
width: 100%;
position: absolute;
}
<header>
<div class="top_nav"></div>
</header>
<div class="container">
<img src="http://www.100resilientcities.org/page/-/100rc/img/blog/rsz_resilientcity_headphoto.jpg">
<div id="short-des"></div>
</div>
<div class="details"></div>
I want div name detail to show below the container div image
enter image description here
don't use position:absolute on container , but use it on header . so header will stay on top of the container , and details will stay under container
see snippet below or fiddle > jsfiddle
let me know if it helps
*{
margin: 0;
padding: 0;
}
header {
position:absolute;
z-index:100;
width:100%;
height:80px
}
.top_nav{
height: 80px;
width: 100%;
background: rgba(0,0,0,.5);
position: relative;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
}
.details{
height: 638px;
width: 100%;
position: absolute;
background:red;
}
<header>
<div class="top_nav">
</div>
</header>
<div class="container">
<img src="http://placehold.it/350x150">
<div id="short-des">
</div>
</div>
<div class="details">
</div>