This fiddle tells the story of a lonely div. One day, an inline img visited the lonely div. They became good friends. But no matter what the img did, it was never quite able to fill the div's void, and thus the lonely div remained depressed:
HTML:
<div><img src="..."></img></div>
CSS:
div {
background-color: red;
display: inline-block;
width: 16px;
height: 16px;
overflow: hidden;
}
img {
display: inline-block;
height: 16px;
width: auto;
position: relative;
background-color: green;
}
Say, who can cure the div of it's feeling of emptiness?
Update: The original fiddle can be found here.
The problem is fixed in your jsfiddle when I add "line-height: 0" to the containing div.
The image is display: inline-block which takes into account white space and line height. I suggest adding vertical-align: top; to the image's style rule.
img {
...
vertical-align: top;
}
Demo: http://jsfiddle.net/y7dd2qmx/
Related
I looked over thousands of questions all of them they want to fit picture in a parent div. I can fit picture in a parent div but when I resize the picture to smaller size the div gets smaller as well. I tried max-width: 80% but the div gets smaller also. I don't want the div box to resize because there are other buttons and lists in the page that move with it. And I cant use background-image trick as well. The only solution is to set for example height: 150px for box div but that also gives me problem for smaller screen sizes. Can anybody be any help? This question probably will be flagged duplicated but I gave up on searching.
.box {
width: 100%;
float: left;
}
.picture {
border: none;
outline: none;
max-width: 100%;
vertical-align: middle;
}
<div class="box">
<img class="picture" src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>
I'm honestly not completly sure what your asking about but solving the size of a picture inside a div with paddings and margins is not what we want to do. there you have to use media-queries to get responsiveness.
try transform: scale(0.5)
scale let you resize your content dependent on how big your content was initially.
.box {
width: 100%;
float: left;
}
.picture {
border: none;
outline: none;
max-width: 100%;
vertical-align: middle;
transform: scale(0.5);
}
<div class="box">
<img class="picture" src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>
Your box element should have a height too. Also, set a position relative to it and a position absolute to the image. The child element should always be placed inside the parent with an absolute position. This way you can individually set sizes and positions.
You can use viewport height for div (vh) as per your need.
.box {
width: 100%;
height:100vh;
float: left;
border:2px green solid;
margin-bottom:10px;
}
.picture {
border: none;
outline: none;
max-width: 80%;
vertical-align: middle;
}
See the example: https://jsfiddle.net/srijan1709/fvezsnjb/10/
Edit-
You can use object-fit for adjusting the image inside div also. Set value of object-fit to scale-down or contain as per your need.
See the example: https://jsfiddle.net/srijan1709/fvezsnjb/27
Try making the div absolute and the image relative to it. I have added a border to the div to see if the image is moving by itself as a test:
.box {
position: absolute;
border: 5px dotted blue; // For testing (remove after done testing)
width: 100%;
float: left;
}
.picture {
position: relative;
padding: 100px 50px 50px 100px; // Moves the image within the div tag
outline: none;
max-width: 100%;
vertical-align: middle;
}
Expected Output:
EDIT: Adjust the padding and width values according to your code expectations.
Please See JSFiddle
I am trying to make an image scroller and I am stuck with my CSS side of things. The current CSS that I have is making them going under each other not next to each other and I can't figure out how to make it work that way.
The Images are stored in a div of themselves which are under a another div called imageScroller and the imageScroller div is under the Content div.
Here is the CSS of the following divs
#content
{
text-align: center;
padding: 20px;
}
#imageScroller{
margin: 0 auto;
width: 850px;
height: 250px;
overflow: hidden;
}
.image{
float: left;
}
I think what you want is achieved by adding white-space: nowrap to #imageSlider and changing .image so that instead of float: left, it is display: inline-block.
Here's a fiddle. Adjust as needed.
The font-size: 0 in #imageSlider is to get rid of extra white space in between the <div>s.
I have 4 Images, and for some reasons my brain stopped working and i cant figure out why i cant center those.
That's the Fiddle -> http://jsfiddle.net/theminijohn/bcMX5/
If i try to just <center> them i'm getting a Deprecated Html Tag Error in my Editor.
I tried a lot of things, till rewriting the Css and Html Code, but i'm brain stuck here.
Could some Gentleman help brake my blockade ? :)
Here is one way of doing it.
Add a wrapper block element around your div's and then apply the following CSS:
.wrap {
border: 1px solid blue;
overflow: auto;
text-align: center;
}
/* Center 4 Blocks */
.hd_b {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
display: block;
text-decoration: none;
}
._hd {
margin-right: 20px;
display: inline-block;
text-align: center;
}
._hd:last-child {
margin-right: 0;
}
._hd img {
opacity: .85;
}
._hd a:hover img {
opacity: 1;
}
See demo at http://jsfiddle.net/audetwebdesign/QTxy9/
The parent .wrap block has text-align: center, and this will center the child ._hd div's that have display: inline-block.
You need to reset the right margin on the last child div using ._hd:last-child.
This works pretty well if you are willing to use the inline-block display type.
Note that any white space between inline-block elements translate into a 1ex wide space, which may not be obvious when you set the margin between blocks.
All of those divs need to be in one container div that has a fixed width. Then you can apply margin: 0 auto to the container.
http://jsfiddle.net/bcMX5/9/
Try doing this:-
Give a "main" DIV outside all img DIV "<div id="main">"
and give "margin: 0 auto;" along with some width to it.
Please refer the Fiddle: http://jsfiddle.net/aasthatuteja/6U2YJ/
Hope this should solve your issue!
would this be, want you want?
._hd {
margin-right: 20px;
display: block;
width:100%;
text-align: center;
}
Forget about margin and float ;) http://jsfiddle.net/bcMX5/8/
._hd {
//margin-right: 20px;
display: block;
//float: left;
text-align: center;
}
Depends on how you want to center the elements? If it's in a column the above answer would work. Its in a grid then wrap them in a fixed width container.
._hd_container{
width:440px;
margin:0 auto;
}
http://jsfiddle.net/RzfMP/
In this question positioning text of anchor within a div and given the same code which I repeat here:
HTML Markup
<div id="header">
Cattle Farms
</div>
CSS Style
#header a {
width: 100%;
height: 100%;
display: block;
font-size: 25px;
}
Answer
div#header a {
width: 100%;
height: 100%;
display: block;
text-indent: 20px;
line-height: 350px;
}
Fiddle
My question is why does not the line-height make the a break out of the div
It does break out of the div. If you put a span inside the a tag and give it a display of inline-block (and a background-color so you can see it) you'll realize it does. Remember the span inherits the line-height. Take a look:
http://jsfiddle.net/fnX9n/6/
Give the a a bigger line-height and without anything else you'll also be able to realize it is breaking out of the div: http://jsfiddle.net/fnX9n/7/
I have the following in my CSS. All margins/paddings/borders are globally reset to 0.
#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}
Now when I write my HTML as
<div id="wrapper">
<div class="content">
some text here
</div>
<div class="lbar">
some text here
</div>
</div>
the page renders correctly. However, when I inspect the elements, div#wrapper is shown as being 0px high. I would've expected it to expand till the end of div.content and div.lbar... Why does this happen?
Again, the page renders fine. This behaviour just perplexes me.
Content that is floating does not influence the height of its container. The element contains no content that isn't floating (so nothing stops the height of the container being 0, as if it were empty).
Setting overflow: hidden on the container will avoid that by establishing a new block formatting context. See methods for containing floats for other techniques and containing floats for an explanation about why CSS was designed this way.
Ordinarily, floats aren't counted in the layout of their parents.
To prevent that, add overflow: hidden to the parent.
I'm not sure this is a right way but I solved it by adding display: inline-block; to the wrapper div.
#wrapper{
display: inline-block;
/*border: 1px black solid;*/
width: 75%;
min-width: 800px;
}
.content{
text-align: justify;
float: right;
width: 90%;
}
.lbar{
text-align: justify;
float: left;
width: 10%;
}
Now, you can
#wrapper { display: flow-root; }
Compatibility https://caniuse.com/flow-root
History https://css-tricks.com/snippets/css/clear-fix/