I have no idea why this is such a struggle. I want to place an image inside a container. That image should be responsive, meaning when the column gets smaller in width, the image should also get smaller. It does that now, but it maintains the height, meaning it will look stretched.
https://codepen.io/anon/pen/vmZKyM
<div class="container-fluid">
<div class="col-md-8 offset-md-2">
<div class="row">
<div class="col-md-4 offset-md-2">
<div class="row">
<p>Left column</p>
<img src="http://placehold.it/600x400" />
</div>
</div>
<div class="col-md-5 offset-md-1">
<div class="row">
<p>Right column</p>
<img src="http://placehold.it/700x400" />
</div>
</div>
</div>
</div>
</div>
I do not know the aspect ratio of the image (in this case I do), so I cannot achieve this with the padding-bottom trick (normally used for images).
How can I achieve this?
change max-width: 100%; to width: 100%; also change height: auto; to height: 100%;
If the container should have a fixed height, then give it an ID (or a class) and change the .img-responsive restrictions the other way around eg
.container {
height: 600px;
}
/*And then change */
.container .img-responsive {
display: block;
height: auto;
max-width: 100%;
}
/*To */
.container .img-responsive {
display: block;
width: auto;
max-height: 100%;
}
Not sure how it will work with a mix of orientations but if they are floated it shouldnt really matter
Related
There are 3 images on my homepage that I want to make responsive. They are not scaling. I have removed any reference to height or width size in the html. I tried to use the CSS rule max-width that targets the image as a percentage relative width value, but can't get it to work.
My html looks like this:
<div class ="wrapper2">
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/kidsspecialevents.jpg" /></div>
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/teenspecialevents.jpg" /></div>
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/adultspecialevents.jpg" /></div>
</div>
The css (that doesn't work) looks like this:
.wrapper img {max-width:100%;}
Any help with this would be appreciated. I've been working on and off with it for months! Thank you
Like Rob said, the .wrapper img {max-width:100%;} only tells the browser you don't want the image to be wider the 100% of the browser window's width.
Check out this code pen with your supplied HTML that shows want you'd like: Code Pen
The width is now set to 50% and the height is set to auto. The images will now take up 50% of the browser window's width and adjust their height to match the original aspect ratio.
Here's just the CSS:
.wrapper2 img {
height: auto;
width: 50%;
}
i made this code if you like.
.wrapper2 img {
height: auto;
width: 100%;
}
.wrapper2 div { float:left; width:33.33%; positive:realtive;}
<div class ="wrapper2">
<div>
<a href="https://www.whitehallpubliclibrary.org/kids-parent/kids/special-events-for-kids/">
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/kidsspecialevents.jpg">
</a>
</div>
<div>
<a href="https://www.whitehallpubliclibrary.org/teens-parent/teens/special-events-for-teens/">
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/teenspecialevents.jpg">
</a>
</div>
<div>
<a href="https://www.whitehallpubliclibrary.org/adults-parent/adults/special-events-for-adults/">
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/adultspecialevents.jpg">
</a>
</div>
</div>
Thank you
Please try this -
<div class ="wrapper2">
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/kidsspecialevents.jpg" />
</div>
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/teenspecialevents.jpg" />
</div>
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/adultspecialevents.jpg" />
</div>
</div>
.wrapper2 {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.wrapper2 div {
width: calc(100%/3 - 2%);
margin: 0 1%;
}
.wrapper2 div a, .wrapper2 div img {
width: 100%;
}
I am having some issues positioning an image within a parent div. I have 2 divs side by side both within a parent div, the first div within the container contains text and the second contains an image. The parent container has no height specified so it adjusts to the height of the content contained within it. I am struggling to absolutely position the image in the 2nd div to the bottom. Below is my HTML and css...
<style>
.container{
width: 100%;
}
.box{
float: left;
width: 49%;
}
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
</div>
I have tried to give .image a relative position and then give the img tag within it 'position: absolute: bottom: 0px;' however this does not seem to work as .image has no fixed height.
Thanks, any help would be appriciated.
That should do the work. In fact, your container has no height at all with 2 floated div inside of it. I use a clear:both to... clear the floats and give the container the proper height.
<style>
.container{
width: 100%;
position: relative;
}
.box{
float: left;
width: 49%;
}
.image img {
position: absolute;
bottom: 0;
right: 0;
}
.clear { clear: both; }
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
<div class="clear"></div>
</div>
You can find more infos about floats and clear on this nice article on css-tricks.com
I've been searching for similar questions to these, but I couldn't find one, so I'm exposing my problem, hoping you could tell me what am I doing wrong and how to correct it.
I'm trying the accomplish the following scenario: two divs, side by side, using 100% of height and width, in which the left one can be scrollable. The right one has a few divs on top of each other, and the last one should have its contents scrollable too.
A picture can better describe the scenario:
The blue divs are the ones that can be scrollable, but the height of red ones is unknown.
I was able to partially accomplish this, but the problem is that the content of the last div is pulled down from the view in the same proportion as the height sum of the red divs, so when the user scrolls that blue div he won't be able to view the full content of it.
What can I do to solve this?
I also got a fiddle where this behavior can be reproduced: http://jsfiddle.net/d3dNG/3/
Thanks for any feedback on this.
HTML:
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="right">
<div id="header1">Header 1</div>
<div id="header1">Header 2</div>
<div id="header1">Header 3</div>
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
background: pink;
}
#left {
float: left;
width: 100px;
height: 100%;
overflow-y: auto;
background: gold;
}
#right {
height: 100%;
width: 100%;
}
#rightContent {
height: 100%;
overflow-y: auto;
background: lime;
}
Since you will not know what the size of #header1 you can go about this by using javascript or jQuery.
(Make sure to only use ids once on your page since they are unique, #header1 is used 3 times)
The html I changed:
<div class="headParent">
<div class="header1">Header 1</div>
<div class="header1">Header 2</div>
<div class="header1">Header 3</div>
</div>
The little jQuery I wrote:
function rightSize() {
var hH = $('.headParent').height(), // grabs the `#header1`'s parents height
mH = $('#rightContent').height() - hH; // minus the height from the `#rightContent`
$('#rightContent').css({height: mH});
}
rightSize();
Finally, a fiddle: Demo
Even once there is more of the .header1 the #rightContent will still adapt correctly to fit the content.
Try this:
HTML
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="rightOne">
<div id="header1">Header 1</div>
<div id="header1">Header 2</div>
<div id="header1">Header 3</div>
</div>
<div id="rightTwo">
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
CSS
#rightOne {
height: 16%;
width: 100%;
}
#rightTwo {
height: 84%;
width: 100%;
}
I've updated your fiddle: http://jsfiddle.net/d3dNG/4/
I need inline DIVs to be spaced equally betweenn each other, and additionally between border and first (or last) DIV in the row.
I use solution found on Fluid width with equally spaced DIVs. It gives me equal spacing between DIVs, but left DIV sticks to the left border, and right DIV sticks to the right. I'd like it to be equally spaced from the borders as they are from each other.
UPDATE:
content DIVs are being created dynamically by Django, so I cannot say how many of them will be there in the line (between 1 and 4).
How can I create additional space on sides which will be equal to distance between DIVs?
Here is html:
<div class="container">
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
</div>
and css:
div.container {
width: 100%;
text-align: justify;
}
div.content {
display: inline-block;
width: 20%;
margin: 0 auto;
}
div.container:after {
content: "";
width: 100%;
display: inline-block;
}
You could use box layout and padding of a certain percentage, like this (I just used 10% padding but you can adjust to suit your needs):
http://jsfiddle.net/XXPwW/2/
And right after asking the question, I've figured out the answer (how ironic?). I'll share it in case someone needs it.
What I've done was creating spacer DIVs with 0 width before first and last content DIV. Here is how it looks like:
HTML:
<div class="container">
<div class="spacer"></div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="spacer"></div>
</div>
and css:
div.container {
width: 100%;
text-align: justify;
}
div.content {
display: inline-block;
width: 20%;
margin: 0 auto;
}
div.container:after {
content: "";
width: 100%;
display: inline-block;
}
div.spacer {
display: inline-block;
width: 0;
}
I have a fixed container and inside of that is an additional container which houses a number of DIVs based on user choices. I need these additional DIVs to line up horizontally and provide horizontal scrolling (but not vertical scrolling).
Such as this:
[x] [x] [x]
Essentially, my setup looks like this:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
</div>
</div>
The CSS breaks down as such:
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
#final {
display: inline-block;
float: left;
}
This setup works fine in Firefox however it continues to break in IE7. All of the "#final" divs are stacking vertically:
[x]
[x]
[x]
Any suggestions on how to fix this?
Several problems here. For a start:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
<div style="clear:both"></div>
</div>
</div>
You should have a DIV after your floats that remains constant, telling your browser not to float any subsequent elements (clear:both).
And you have several "final" DIVs, so they be in a CSS class, not an ID.
.final {
float: left;
}
That should do it!
Edit: That will fix your HTML/CSS errors, at least. But I've just noticed that you want the document to scroll right. The only way to do that is to set the width of the #container div to be wider than the sum of all the widths of the .final divs. Otherwise your browser will attempt to push everything "down".
Try this......
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
</div>
</div>
<style>
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
.final {
float: left;
}