Given this HTML
<div class="flex">
<div>
<img src="https://via.placeholder.com/300x300" alt="">
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis nisi elit, vitae interdum nisi porttitor a. Maecenas porta mollis venenatis. Proin suscipit, est et malesuada ultricies, nisi elit aliquam arcu, et luctus felis dolor euismod ante. Praesent nec malesuada arcu. Nunc rutrum erat risus, id elementum leo dignissim eu. Fusce feugiat, massa vestibulum venenatis ullamcorper, nisl justo aliquam purus, nec pellentesque tellus magna non quam. Pellentesque luctus quam in justo congue tempor. Cras placerat sit amet nulla id pretium. Nulla facilisi. Phasellus dictum neque sed lacus congue, vel dapibus enim efficitur.
</div>
</div>
how can I make the image height scale automatically with the text div, according to browser width and font size of the text?
https://jsfiddle.net/msuL6pvx/ In this case the image has to be scaled down to have the same height as the text
https://jsfiddle.net/msuL6pvx/1/ In this case the image has to be enlarged to its max size (300x300) and not exceed those dimensions
I dont' think this is possible with pure CSS. The only think I could think of is using position: absolute for <img> to take it out of the flow in combination with max-height; then adjusting the margin of the text with javascript.
https://jsfiddle.net/zphb0fLd/
Hope it's useful.
Well as far as my knowledge, the image size can be increased with relative to text size, but its opposite case is not possible.
Here is my code. I use the flexbox to increase the height of the image as per text size. Let me know if it meets your requirements.
<div class="flex">
<div class="image-container">
<img src="https://via.placeholder.com/300x300" alt="">
</div>
<div class="text-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis nisi elit, vitae interdum nisi porttitor a. Maecenas porta mollis venenatis. Proin suscipit, est et malesuada ultricies, nisi elit aliquam arcu, et luctus felis dolor euismod ante. Praesent nec malesuada arcu. Nunc rutrum erat risus, id elementum leo dignissim eu. Fusce feugiat, massa vestibulum venenatis ullamcorper, nisl justo aliquam purus, nec pellentesque tellus magna non quam. Pellentesque luctus quam in justo congue tempor. Cras placerat sit amet nulla id pretium. Nulla facilisi. Phasellus dictum neque sed lacus congue, vel dapibus enim efficitur.
</p>
</div>
</div>
.flex{
display:flex;
flex-wrap:wrap;
}
.image-container{
flex:1;
}
.text-container{
flex:3;
}
.text-container p{
font-size:2em;
padding:10px;
}
.image-container img{
width:100%;
height:100%;
object-fit:cover;
}
Live example link: https://codepen.io/pranaysharma995/pen/JjdQWyQ
Related
can anyone tell me why is my nav bar not following sticky position property.
HERE IS THE LINK TO MY CODE--https://codepen.io/prashant_verma/full/yLMKMQL
Use position: fixed
header {
position: fixed;
background-color: lightblue;
}
p {
width: 150px;
}
<header>
<h1>Hello World</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
</p>
This is because position sticky always follows its parent height and width. In your case, #sticky is inside its parent <header> and header has the least minimum height, that's why when you are passing the header, #sticky is following so. So,the solution is, you rather keep the #sticky in such a position so that <body> can be its parent. like this,
<body>
<div id="sticky">
...
</div>
<body>
then it will stick on top always across the page.
And if you want to place it under the h1 - Flexbox challenge 2,
give it top: (the height of the h1)
Though position: fixed is an easy solution for you, you must know position sticky well also
I am trying to recreate a design gotten from a UX Designer,
the design is was created for a screen size of 1440px, which is expected to be responsive across 992px, after much work trying to wrap my div around the image, this is what I get
The problem here is, is there a standard way to wrap div around the image for a perfect fit...
Below is my sample code
HTML
<div class="goal">
<div class="col-md-4 col-xs-12" style="padding: 0">
<img src="assets/images/image4.png">
</div>
<div class="goal-txt col-md-8 col-xs-12">
<h2>Vivamus quis</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus imperdiet ultrices. Proin at sagittis dolor. Nam nec ligula mi. Donec tortor purus, aliquet quis rutrum in, lobortis ut justo. Sed ultricies mauris a dignissim finibus. Curabitur feugiat, lorem eget congue suscipit, felis massa facilisis turpis, vel euismod dui turpis in odio. Aliquam ultricies pretium diam, sed ultrices odio posuere vitae. Donec commodo velit vitae nunc interdum, vitae ultrices dolor sagittis. Praesent tincidunt nibh at nisl cursus, eget commodo turpis dapibus. Fusce ac suscipit leo, at euismod velit. Curabitur consequat bibendum justo nec ultricies. Cras nec lacus eu dolor vehicula mattis. In hac habitasse platea dictumst.</p>
<ul>
<li>Etiam libero urna, tempor non.</li>
<li>Sed vitae molestie ligula. Donec.</li>
<li>Etiam libero urna, tempor non.</li>
<li>Sed vitae molestie ligula. Donec.</li>
<li>Etiam libero urna, tempor non.</li>
<li>Sed vitae molestie ligula. Donec.</li>
</ul>
</div> </div>
CSS
.goal-txt {
background: #F4F7FC;
padding: 32px 78px 86px 78px;
}
The issue is because you have an image of 713px height and your text content is less height. I would say give your goal-txt of the same height as your image. So that makes:
.goal-txt {
max-height: 713px;
overflow-y: scroll;
}
This question already has answers here:
CSS - How to align image left bottom to the text block?
(5 answers)
Closed 6 years ago.
Given the below HTML:
<div>
lorem ipsum...
<img style="float:left;margin-top:-100px" />
</div>
I would expect to get something like this:
But what I actually end up getting is this:
.Block {
width: 300px;
margin: auto;
}
.Image {
width: 150px;
float: left;
margin-top: -100px;
}
<div class="Block">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
<br><br>
Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper.
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" />
</div>
Here is a pen showing how the code behaves. Is something like this possible? Why does margin-bottom result in behaviour that I would expect but margin-top does not?
There are few ways through which you can align img tag and add some more tags for text and get result as your first img as you have asked in your question.
Solution 1 :- We have added 2 <p> tags. And then added margin-left to 2nd <p> tag using nth-child() selector, which is equal to the width of image+10px . And negative value too is added to bring img tag to top and replace 2nd <p> tag.
.box{
width:300px;
margin:auto;
position:relative;
}
.box > p:nth-child(2){
margin-left:110px;
}
.image{
width:100px;
margin-top:-140px;
float:left;
}
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p>
<p>
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est.
</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
</div>
Solution 2:- We have added 2 <p> tags. But this time no negative margin is added to img tag or .image just float left, and even no margin-left value to 2nd <p> tag. Well that's because we used float:left for .image and float:right for 2nd <p> tag so by default they both get aligned.
.box{
width:300px;
margin:auto;
position:relative;
}
.box > p:nth-child(2){
float:right;
width:180px;
margin:0px;
}
.image{
width:100px;
float:left;
}
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p>
<p>
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est.
</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
</div>
Solution 3:- No need of adding any <p> tag or other tags to style your text, but it's good practice if you add some default assigned tags to your text.
Just make changes in you HTML codes i.e. add your <img> in-between you text and then it works fine.
.box{
width:300px;
margin:auto;
position:relative;
}
.image{
width:100px;
float:left;
padding:10px 10px 0px 0px;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est.
</div>
margin-top (positive value) - When we assign margin-top positive value to an element it pushes that element from top and if it has some element below it than that too move bit down.
margin-top (negative value) - But When we assign margin-top negative value to an element, so at that point we are making that element to get into a field of an another element which itself has some properties already assigned i.e. pulling or forcing the below to the top.
This is what the issue in your question too, either you make changes in you HTML code i.e. <img> in-between text or add <p> tag and work.
.Block {
width: 300px;
margin: auto;
}
.Image {
width: 100px;
height:100px;
float:left;
margin-right: 1em;
}
<div class="Block">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
<br><br>
Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" /> Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper.
</div>
I have a full height hero unit set using 100vh along with a fixed position header.
<div class="header">
This is a fixed position header
</div>
<div class="first_section_container">
<div class="first_section">
<div class="first_section_content">
<span>
This is some test content that I would like to be vertically centered, the fixed position header is causing me some problems
</span>
</div>
</div>
</div>
https://jsfiddle.net/dfn1m4kk/
I am trying to get the span to be vertically centered in the first_section div and to take into account the height of the fixed position navigation bar.
Try this
html, body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.header{
background:green;
height:50px;
width:100%;
position:fixed;
text-align:center;
color:white;
top: 0;
}
.first_section_container{
height:100%;
}
.first_section{
height: calc(100vh - 50px);
background:#58585a;
margin-top: 50px;
}
.first_section_content{
height:100%;
display: table;
margin: 0 auto;
}
.first_section_content span{
display: table-cell;
width:400px;
vertical-align: middle;
text-align: center;
}
<div class="header">
This is a fixed position header
</div>
<div class="first_section_container">
<div class="first_section">
<div class="first_section_content">
<span>
This is some test content that I would like to be vertically centered, the fixed position header is causing me some problems
</span>
</div>
</div>
</div>
<div class="second_section">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nisl dui, gravida sed nisi id, sollicitudin placerat sapien. Nulla facilisi. Praesent sodales lorem quis est pulvinar, at consectetur ipsum tempus. Sed a lacus bibendum, ultrices odio non, fermentum nisl. Proin erat leo, venenatis in velit sed, molestie luctus nunc. Suspendisse quis aliquet odio. Etiam commodo nec neque quis viverra. Etiam nec justo ipsum. Morbi condimentum ipsum feugiat tincidunt semper.
</p>
<p>
Ut vestibulum nulla dapibus vestibulum efficitur. Fusce vel augue ac est iaculis elementum vel et risus. Fusce imperdiet lacus eget lorem sodales consequat. Morbi porta risus sit amet massa auctor, vel rutrum augue porta. Quisque interdum est at ex placerat iaculis id sit amet felis. Maecenas accumsan turpis mattis nisi porttitor aliquet. Suspendisse suscipit magna vitae aliquet placerat. Nullam a facilisis mauris. Praesent ut orci vehicula, aliquet arcu eu, tempor arcu. Maecenas congue dui nisl, quis ultrices arcu aliquam ut. Pellentesque quis tincidunt mi. Duis rhoncus felis at mauris vestibulum malesuada.
</p>
<p>
Nam in porttitor metus. In tristique, leo vitae facilisis facilisis, eros felis ornare neque, nec mollis velit sapien sit amet mauris. Fusce iaculis purus orci, id vehicula nisi facilisis in. Aliquam id nunc ac nisi feugiat cursus. Aliquam id orci at risus malesuada laoreet feugiat et mi. Integer laoreet lobortis nibh gravida euismod. Nulla facilisi.
</p>
<p>
Phasellus maximus lacus quis ipsum tincidunt, ac dapibus turpis dignissim. Nunc sed odio ut arcu venenatis pharetra. Sed vel justo magna. Cras sagittis rutrum dapibus. Mauris quis dictum arcu, eu finibus felis. Nam dictum nibh gravida, mattis massa ac, varius urna. Vestibulum sodales ornare justo. Proin ac scelerisque odio, at euismod arcu. Quisque suscipit rhoncus porttitor.
</p>
<p>
Donec mattis vestibulum lorem a pellentesque. Duis ut iaculis enim, a hendrerit felis. Proin finibus, leo non ornare elementum, nibh velit malesuada elit, eget pellentesque mauris nisl eu dolor. Morbi quis lobortis nisi. Proin convallis ipsum sed gravida dapibus. Aliquam fringilla ipsum vitae varius ornare. Pellentesque neque libero, congue ac lorem eget, faucibus fringilla risus. Integer semper, elit et posuere sagittis, est ante rutrum ligula, sed ornare magna ipsum et nibh.
</p>
</div>
One way to achieve this is to use flexbox.
Simply add:
.first_section_content{
height:100%;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
Here is your fiddle updated
Be mindful that flexbox isn't 100% supported. For information on which browsers do support it, you may look here.
Another yet variant of doing this is by:
.first_section_content span{
text-align:center;
width:400px;
position:relative;
top:45%;
}
Make sure you fix the header top:0; and Hero margin-top to height of the header too.
I built the same hero using this solution on this link
Here is your solved jfiddle
I have a content container that is 500px wide and floated to the right. This container contains text and then an image and then some more text. Ultimately I would like to pull this image out of the bounding 500px container and have it span the full width of the page, which for argument sake is 1000px wide. In effect the images will be full-width (1000px wide) while the content container is only 500px wide. What is the best way to do something like this so that the image can be at full width?
jsfiddle.net/QCb3R/
I would like to pull the image to extend fully outside of the .content div.
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
<img src="http://lorempixel.com/500/300/" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
</div>
</div>
And the CSS:
.container {
width: 1000px;
background-color: #eee;
}
.content {
width: 500px;
float: right;
}
It is quite easy to create that effect, but not by setting the image to be absolutely positioned.
Here's a jsFiddle
.container {
width: 1000px;
background-color: #eee;
}
p {
width: 500px;
float: right;
}
.content {
width: 1000px;
float: right;
}
The problem with setting the image to be absolutely positioned is exactly because it takes the image out of the normal document flow. You would have to fill up the gap left by the original image with a place holder element of the same height, and then position the absolutely positioned image over the top of the place holder element. That sounds like a job for JavaScript as it would require access to the DOM to retrieve the position of elements on the page, that can't be done with CSS and HTML only.