I am trying to make my image cover the whole div which is 50% of the parent div. I used object-fit:cover but it's still not working. The problem is as I reduce the width of window the image also shortens.
In (1) the width is full
The 2nd picture is 900px window size.
* {
box-sizing: border-box;
}
body {
background: yellow;
}
section {
background: red;
widtth: 100%;
min-height: 700px;
}
article {
background: green;
width: 50%;
min-height: 700px;
padding: 100px;
float: left;
}
picture {
float: left;
width: 50%;
min-height: 700px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
section::after {
content: "";
clear: both;
display: block;
}
<body>
<section class="about">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor
sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<picture>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</picture>
</section>
</body>
I have linked the code pen link below for reference.
https://codepen.io/YASH_KR18/pen/LYObNrB
Simple solution, add display:flex to its parent element which is picture will make it work.
* {
box-sizing: border-box;
}
body {
background: yellow;
}
section {
background: red;
width: 100%;
min-height: 700px;
}
article {
background: green;
width: 50%;
min-height: 700px;
padding: 100px;
float: left;
}
picture {
float: left;
width: 50%;
min-height: 700px;
display:flex
}
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
section::after {
content: "";
clear: both;
display: block;
}
<body>
<section class="about">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor
sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<picture>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</picture>
</section>
</body>
Because you are using the extra picture tag for that
I am avoiding that tag because I see no need of that in this whole code. If you want to use the picture tag vary badly we have to think of something else. Here take a look:
HTML
<body>
<section class="about">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</section>
</body>
CSS
*{
box-sizing:border-box;
}
body{
background:yellow;
}
section{
background:red;
widtth:100%;
min-height:700px;
}
article{
background:green;
width:50%;
min-height:700px;
padding:100px;
float:left;
}
img{
float:left;
width:50%;
min-height:700px;
}
section::after{
content:"";
clear:both;
display:block;
}
Floating elements (removing them from the normal flow of the html structure) is the source of a lot of problems. If you would use a flexbox or gridbox for the parent element then there would be no need to float the children to position them next to eachother and then I believe your problem is solved. Well that is if the snippet below does what you're after at least! If not I might not understand your question yet.
/* Colors for visibilty */
body{ background-color: yellow;}
article{ background-color: green; padding: 100px;}
picture{ background-color: red; }
/* The problem fix*/
section
{
display: grid;
grid-template-columns: 50% 50%;
width: 80%;
max-width: 1100px;
min-height: 700px;
margin: auto;
}
picture img{
object-position: center;
object-fit: cover;
width: 100%;
height: 100%;
}
<section>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<picture>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</picture>
</section>
Related
I have an image (inner-img) inside a div with padding (inner-div) and I need to make this image to fit the outside div (main-div). I tried to use negative margin but is not working. Any light?
.main-div {
width: 500px;
background: yellow;
}
.inner-img {
max-width: 100%;
}
.inner-div {
padding: 20px;
}
<div class="main-div">
<div class="inner-div">
<img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
</div>
</div>
If you can't change your markup, you can use negative margin on .inner-img so that the image breaks out of .inner-div
.main-div {
width: 500px;
background: yellow;
}
.inner-img {
max-width: calc(100% + 40px);
margin-top: -20px;
margin-left: -20px;
margin-right: -20px;
}
.inner-div {
padding: 20px;
}
<div class="main-div">
<div class="inner-div">
<img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
</div>
</div>
I Moved the img out of the inner div and placed it in the outer div. Doing this allows the img to expand to the constraints of it's parent which is now .main-div:
This may not work for your use case but thought it worth mentioning.
.main-div {
width: 500px;
background: yellow;
}
.inner-img {
width: 100%;
}
.inner-div {
padding: 20px;
}
<div class="main-div">
<img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
<div class="inner-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
</div>
</div>
I'd like to create 2 columns inline. The first column has fixed width of 200px and second column should take up the rest of the screen. The second column should autoscroll on the x-axis. I've been trying to use flex but I'm very confused by the markup. Can someone please explain what I'm doing wrong.
Path: html
<section className="container">
<div className="container-name">1</div>
<div className="container-time">
<div className="element">
222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222999999
</div>
</div>
</section>
Path: CSS
.container {
flex: 0 0 auto;
}
.container-name {
width: 200px;
border: 1px dotted;
}
.container-time {
flex: 0 0 auto;
border: 1px solid;
}
.element {
display: flex;
overflow-x: auto;
}
You can get the desired output using:
max-width on the container
display: inline-flex; on the container
max-width on the container-time
.container {
max-width: 100%;
display: inline-flex;
}
.container-name {
width: 200px;
border: 1px solid red;
}
.container-time {
flex-grow: 1;
max-width: calc(100% - 200px);
border: 1px solid green;
}
.element {
display: flex;
overflow-x: auto;
}
<section class="container">
<div class="container-name">1</div>
<div class="container-time">
<div class="element">
222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
</div>
</div>
</section>
Hope this solution will help you!
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
min-height: 100vh;
}
.container .split {
position: relative;
width: 100%;
height: 100%;
}
.container .split__left {
max-width: 400px;
background-color: coral;
}
.container .split__right {
padding: 2rem;
overflow-x: scroll;
background-color: pink;
}
.container .split__right p {
white-space: nowrap;
}
<div class="container">
<div class="split split__left"></div>
<div class="split split__right">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
</div>
</div>
[NOTE] see this in bigger screen.
I am trying to center images inside my <article> and <aside>, and i am not sure what's wrong with the code. I tried to make some adjustments using article#tablet but no success. Now the images lays on the left, no matter what...if i inspect the item and give it a margin or padding it will react. But can not center it.
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet">
<img src="https://via.placeholder.com/150x150" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper-2">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside>
<img src="https://via.placeholder.com/150x150" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article>
<img src="https://via.placeholder.com/150x150" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
Any help i would appreciate. Thank you
You can make use of flexbox in this situation. According to your need, just use the align-items and justify-content properly.
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
display: flex;
align-items: center;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
.img-wrapper img {
width: 50px;
height: 50px;
}
.img-wrapper {
display: inline-flex;
align-items: center; /**Vertical */
justify-content: center; /**Horizontal */
height: 100%;
flex: 1;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet" class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
Your CSS does not have any styles for images.
To center the image in your you have to select it and apply styles to it, for example an auto margin and display: block:
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
/* Added this */
article img,
aside img {
display: block;
margin: 0 auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet">
<img src="./img/hand_ipad.png" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper-2">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside>
<img src="https://picsum.photos/200/300" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article>
<img src="https://picsum.photos/300/300" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
You want to center the image inside the <aside> and <article> right ?
Just add property : text-align : center in the aside and article, the images inside them will be centered.
Checkout in codepen for more detail
https://codepen.io/anon/pen/PddMYZ
Or only necessary code here (The css file) :
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
text-align : center;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
aside{
text-align : center;
}
This is another simple method.
I have wrapped image in a div and added single css line for that div.
section {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
width: 50%;
background-color: #A2B2C1;
}
aside {
float: right;
width: 50%;
background-color: #C3D7DF;
}
/*css which I have added*/
.img-wrapper {
text-align: center;
}
<section>
<article>
<h2>Article Block.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
<div class="img-wrapper">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
</article>
<aside>
<h2>Aside Block.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
<div class="img-wrapper">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
</aside>
</section>
I have an issue on a test web-page i'm creating for practice where i have two div elements one above the other, however the top one (.item in the CSS) is 'under lapping' the bottom one (.wide and .img-span in the css) and sticks out on the other-side for some reason. I have fiddled around with my CSS and HTML for a while and i cant fix it.
CSS:
.item {
padding-left: 20%;
padding-right: 20%;
padding-top: 4px;
padding-bottom: 4px;
overflow: hidden;
margin: 0;
}
.item p {
font-size: 18px;
}
.img-span {
padding: 0;
margin: 0;
width: 100%;
}
.wide {
width: 100%;
height: 100%;
opacity: 1;
overflow: hidden;
}
HTML:
<div id="first" class="item">
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum!
</p>
</div>
<div id="img-span">
<img src="img/board-911636.jpg" class="wide">
</div>
Setting display: block on the img fixes your problem.
I've been trying different ways but couldn't achieve what I want.
<div id="parent">
<div id="child-1"></div>
<div id="child-2"></div>
<div id="child-3"></div>
</div>
So I have the #parent at height: 100vh.
#child-1 should have height: 100% of parent.
#child-2 and #child-3 should have width: 100% and height: auto and they should be stacked on top of each other at position bottom: 0.
I've been trying to set parent relative and two childs absolute but the first child's height gets ignored.. I tried with display flex but first child's height is not 100% of parent.. I'm very confused how to do this.
Can someone help?
Here is what I'm trying to achieve: jsfiddle.net
You have to first get the bottom value of #child-2 dynamically as you said it should be on the top of #child-3.
You need to apply jQuery to get the height of #child-3 dynamically and then applying the height value of #child-3 to the bottom value of child-2, just like
#child-2 {
bottom: height-of-child-3;
}
Look at this Codepen
Or look at the snippet below:
height_child_three = $('#child-3').height();
$('#child-2').css({
position: 'absolute',
bottom: height_child_three
});
#parent {
width: 100vw;
height: 100vh;
background: #000;
position: relative;
}
#child-1 {
width: 100%;
height: 100%;
background: #eee;
}
#child-2 {
width: 100%;
background: #a0ea0e;
}
#child-3 {
position: absolute;
bottom: 0;
width: 100%;
background: #30e30e;
}
body { margin: 0; } /* A small reset */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child-1">
<strong>I'm child 1</strong>
</div>
<div id="child-2">
<strong>I'm child 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione deleniti voluptate commodi distinctio, repellendus qui, placeat laboriosam eligendi! Ducimus reiciendis officiis debitis placeat adipisci quae hic tempore vitae suscipit nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed aliquid, laborum nisi quos excepturi hic! Molestias hic consectetur dolor! Perferendis iste, quisquam quaerat ab, odio ducimus! Odio, minima error?</p>
</div>
<div id="child-3">
<strong>I'm child 3</strong>
</div>
</div>
Hope this helps!
Is this what you need?
HTML:
<div id="parent">
<div class="child-1"></div>
<div class="child-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum necessitatibus dolorem soluta laudantium cupiditate maiores neque, aliquid accusamus autem saepe tempora, itaque possimus, eaque deleniti odio atque enim omnis.</div>
<div class="child-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, illo est dolor dolores placeat deleniti quae consequuntur eum ipsum blanditiis laboriosam quod repellendus fugit! Odio quis rem vel a dolores.</div>
</div>
CSS:
html,
body,
div {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
#parent {
position: relative;
width: 100vw;
height: 100vh;
background: #ccc;
}
.child-1 {
width: 100%;
height: 100%;
background: red;
}
.child-2 {
width: 100%;
height: auto;
padding: 30px;
background: blue;
}
.child-3 {
width: 100%;
height: auto;
padding: 30px;
background: green;
}
Here you can see a solution just using plain CSS. CODEPEN