I am new to HTML and CSS and I am wondering how I can put an image directly to the left of a textbox. For this the image must have the same height as the textbox and the overall picture has to be centered. This is the code I already have written:
div {
margin: auto;
width: 20%;
border: 1px solid black;
padding: 25px 50px 500px;
background-color: lightblue;
}
<img src="https://climate.nasa.gov/system/feature_items/images/28_global_ice_viewer.jpg">
<div> Textbox </div>
How do I make an image the same size as the box next to it and how do i align/put this image next to the left-border of this rectangle. The overall block has to be in the center.
I would use the flex property of CSS and adjust the image as a background image to make in align center to the div. Heres the code :
.container {
display: flex;
}
.content {
flex: 1;
padding: 50px;
background-color: lightblue;
}
.image {
flex: 1;
background-image: url("https://climate.nasa.gov/system/feature_items/images/28_global_ice_viewer.jpg");
background-position: center;
background-size: cover;
}
<div class="container">
<div class="image">
</div>
<div class="content">
<p>How do I make an image the same size as the box next to it and how do i align/put this image next to the left-border of this rectangle. The overall block has to be in the center.</p>
</div>
</div>
Related
I'm trying to get an image (img) to fill all available space inside a div BUT also I want the img itself to be inside an equaly sized container with position:relative so that I can place markers on the image with absolute position.
I have tried using div background-image and that works perfect except that my markers positions are out of place (of course) since the parent div is not the same size.
And with I get the markers to work perfect but then the image doesn't scale with parent container.
I need the image to behave like background-image but I also need the parent container to be same size.
Here I have 2 pens showing what I mean.
First one with background-image. pen:background-image
body { height: 90vh;
background: aliceblue;}
.page-inner {
aspect-ratio: 16 / 9;
position: relative;
padding: 1em 1em 0 1em;
display: flex;
flex-direction: column;
align-items: center;
height:100%;
border: 1px solid black
}
.main-container {
width: 100%;
flex: 1;
padding: 2em 1em 2em 1em;
background:yellow;
}
.working-area {
position:relative;
}
.work-item {
position:absolute;
top:10%;
left:10%;
background:white;
outline: 2px solid black;
}
<div class="page-inner">
<h3 class="" >Some text</h3>
<div class="main-container">
<div class="working-area" style="height:100%;width:100%;background-position: center;background-image:url('');background-size: contain;background-repeat: no-repeat">
<div class="work-item">X</div>
</div>
</div>
<div>
<h3 class="" >Some text again</h3>
</div>
</div>
Second one with img: pen:img
body { height: 90vh;
background: aliceblue;}
.page-inner {
aspect-ratio: 16 / 9;
position: relative;
padding: 1em 1em 0 1em;
display: flex;
flex-direction: column;
align-items: center;
height:100%;
border: 1px solid black
}
.main-container {
width: 100%;
flex: 1;
padding: 2em 1em 2em 1em;
background:yellow;
}
.main-container img {
width: 100%;
height: auto;
}
.working-area {
position:relative;
}
.work-item {
position:absolute;
top:10%;
left:10%;
background:white;
outline: 2px solid black;
}
<div class="page-inner">
<h3 class="" >Some text</h3>
<div class="main-container">
<div class="working-area">
<img src="" style="" />
<div class="work-item">X</div>
</div>
</div>
<div>
<h3 class="" >Some text again</h3>
</div>
</div>
I want to combine these 2 into one :-) I need full scaling of image at the same time as I need to get image size and position relative so I can place my markers.
The image can be in any size and the screen can be resized at any time, so I need a solution that really is responsive.
thanks!
I have tried width:100%;height:auto; nad like 200 other different things. I have also started to calculate the image aspect-ratio and have a hidden img and then manually, with js, calculate each marker pos in % based on parent div size.
The solution needs to work with all img sizes and aspect ratios. Users uploads image so I don't know what sizes will come.
I have also tried to position the image with full width and height and then used transform: scale to make it fit the parent div with lots of calculations in js.
But there has to be an easier way :-)
I put three photos inside a container but since I want there to be space between them, I couldn't leave the original size because they would take up the whole container without leaving the space I want.
To make them smaller I modified the height to 80%.
It worked but since I need to add the shadow to the box, I need it to match the edges of the image.
As you can see from the purple, the box is larger than the actual image. I would like to know how to get a box as big as the actual image, so without the purple section.
I added the background color only to the first pic, but the problem can be extended for all the three pics.
I post the code below.
.background {
height: 100vh;
display: flex;
justify-content: space-between;
}
.background * {
width: 100%;
height: 80%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
<div class="background">
<div class="firstphoto"></div>
<div class="secondphoto"></div>
<div class="thirdphoto"></div>
</div>
Thanks all! ;)
You can take a look at object-fit property: https://www.w3schools.com/css/css3_object-fit.asp
Also, you should put:
.background > * {
flex: 1/3;
}
So that the boxes are taking the same space.
you should add this to each div that contains an image (if they have the same class)
The div would then be positoinned relatively to the image and you could then edit the box-shadow with the box-shadow property
.col{
position:relative;
top:0px;
left:0px;
width:100%;
height:100%;
margin-right:3.33%;
box-shadow: 10px 10px 10px 10px red;
}
Not sure why you're having the images as background images, but I would just use object-fit. Do note, I replaced the divs with image tags.
.background {
height: 100vh;
display: flex;
justify-content: space-between;
}
.background img {
width: 100%;
height: 80%;
padding: 1rem;
box-sizing: border-box;
object-fit: contain;
}
<div class="background">
<img src="https://picsum.photos/200/300" alt="200x300" title="200x300"/>
<img src="https://picsum.photos/50/150" alt="50x150" title="50x150"/>
<img src="https://picsum.photos/30/150" alt="30x150" title="30x150"/>
</div>
I'm new to CSS, and I want to add a rectangle in the middle right of the image and add some content inside it
Fiddle
HTML:
<div class="MyClass__background"> </div>
SCSS:
.MyClass{
min-height: 100vh;
display: flex;
flex-direction: column;
&__background {
background-image: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_509107562_2000133320009280346_351827.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100vh;
}
}
So I want something like this:
Image
How can I achieve this? Regards
Your can find great docs here https://www.w3schools.com/css/default.asp and https://developer.mozilla.org/en-US/docs/Web/CSS
body {
padding: 0;
margin: 0;
}
.MyClass{
min-height: 100vh;
display: flex;
flex-direction: column;
/* add position relative this will prevent the children from moving out of the parent container */
position: relative;
}
.MyClass__background {
background-image: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_509107562_2000133320009280346_351827.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100vh;
}
.rectangle {
position: absolute; /* will move the rectangle to the top left corner */
right: 5px; /* move to the right with 5px space on the right with 5px space on the right */
bottom: 50%; /* this and translate center the image vertically */
transform: translateY(50%);
border: 2px solid red;
}
/* Center and display the image & text side by side */
.rectangle-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.rectangle-content img {
margin-right: 50px;
max-width: 100% /*make the image fit in the container*/
}
<div class="MyClass__background">
<div class="rectangle">
<div class="rectangle-content">
<img src="https://picsum.photos/128/64" alt="">
<div>
<p>Some Text</p>
<p>Some Other Text</p>
</div>
</div>
</div>
</div>
First, you need to add .MyClass to the div. Then change your modifier class to use -- instead of __, as what you're doing is modifying the block, not creating a new element (assuming BEM)
Then, since you've already given it display:flex, all you need to do is add align-items:flex-end to move its contents to the right, and justify-content:center to vertically center its contents.
Then, add an overlay element inside the outer element. That's where you put your content.
https://jsfiddle.net/fgz8oab1/1/
I have some vertically aligned text in a div that I want to remain vertically centered when the browser resizes. As the div shrinks with the browser, my text becomes offset towards the bottom of the div.
Any suggestions?
Here is a Fiddle of the issue I'm experiencing.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
CSS:
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat left top;
background-size: 100% auto;
height: 360px;
}
.inner-wrapper {
display: table;
width: 100%;
height: 360px;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: #fff;
}
Is this what you're looking for?
The text actually does center, though the background image doesn't, hence it looks like it doesn't, so here is 2 versions (fiddle use background-size: cover) where image centers too
Updated fiddle
html, body {
height: 100%;
}
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: 100% auto;
max-height: 360px;
height: 100%;
}
.inner-wrapper {
display: table;
width: 100%;
height: 100%;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: black;
}
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
The problem is your background, the div is staying the same size and the text is staying centered, you background makes it seem not so. Like Gavin said use background-size cover.
Your problem isn't actually that your text isn't centered, because it is. Your actual issue is that your image doesn't have enough height at that size to fill the height of the container.
See the screenshot below, here I have used the element inspector to highlight the "outer-wrapper" which is the blue box you see. Notice the text is centered within it.
So to tackle the actual issue which is the image either needs to fill the div or needs to stay centered itself.
To stay centered add the following to the outer-wrapper: (Fiddle)
background-position: center;
To fill the div, remove the background-size from outer-wrapper and add this: (Fiddle)
background-position: center;
background-cover: cover;
I have an image in a container div below which is a div containing text that can scroll. The image can vary in size so the height of the image will vary depending on the image being displayed i.e. it isn't always 400 x 200 as in my example.
My problem is that when the text scrolls there is a space between the image and the point where the text should scroll behind the image. This seems to be because the image container div is not the same size as the image.
This JSFiddle shows the problem https://jsfiddle.net/t0ag2z5k/50/
Can anyone tell me both why this is happening and how to fix it please?
CSS code below...
#plotdetails {
display: flex;
flex-direction: column;
float: left;
width: 400px;
z-index: 5;
position: fixed;
height: 100%;
}
#plotdetails #plot-img-container {
display: inline-block;
}
#plotdetails #plot-img-container img{
width: 400px;
display: inline-block;
}
#details-text {
padding: 0 20px 0 20px;
overflow-y: scroll;
flex: 1;
}
HTML here
<div id="plotdetails">
<div id="plot-img-container">
<img src="http://placehold.it/400x200">
</div>
<div id="details-text">
<h1>Lot's of words here....</h1>
</div>
</div>
Why do you want your image to be display as an inline-block when it's not utilized as such? Try (https://jsfiddle.net/t0ag2z5k/52/):
#plotdetails #plot-img-container img{
width: 400px;
display: block;
}