CSS: Div is Smaller Than Object - html

I have tried everything I can think of, like: overflow, box-sizing, messing with divs in the html, hard-coding div width, etc. Yet nothing is working and I'm not seeing any inherited characteristics that need overriding for any of these to work.
This is causing a problem where my image has a massive amount of whitespace around it and I can't figure out how to get it to stop (since my code is already working on other pages).
I've tried switching from .png to .jpg and back, but its been no use.
Any help is appreciated.
(Border-radius also doesn't work due to this, which was sort of my first hint it was a div size problem.)
My HTML:
<div class="content-wrapper">
<div class="content-header-wrapper">
<h2>Page Title.</h2>
</div>
<div class="title-img"><img src="../Images/headshot.jpg"></div>
<div class="content-message-wrapper">
<div class="p1-titlewrap">
<h3>1st Paragraph Header</h3>
</div>
</div>
</div>
My CSS:
.content-wrapper {
justify-items:center;
background-color: white;
background-attachment: scroll;
background-repeat: no-repeat;
background-size: 100%;
font-family: "Ubuntu Condensed", sans-serif;
height:auto;
}
.content-wrapper .content-header-wrapper {
font-size: 1.5em;
display: flex;
justify-content: center;
}
.content-wrapper .title-img {
display: flex;
justify-content: center;
transform: scale(.15,.15);
box-sizing: content-box;
}

Have you tried adjusting the transform: scale() property in the CSS? or is that not something you wanted to do in the first place?

Maybe set "background-size: cover;" that should fill the entire div with the image. If not why not try and resize the image so that it fills up more space.

Try to set image as css property background and set background-size:cover;. Hope it will help you to solve this problem.

Related

How to make image nested in div fill the remaining space on the page?

I'm learning CSS and got stuck creating a layout that contains a header and an image that fills the rest of the screen. Using the following code, I'm able to achieve what I'm looking for:
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<!-- <div class="image-container"> -->
<img src="https://picsum.photos/500/300"/>
<!-- </div> -->
</div>
</body>
</html>
Now the problem is that I want to wrap the image element into a div as I'd like to position an overlay on top of the image. As soon as I nest the img within a div, the resizing doesn't work properly anymore. If the screen is wide, the image overflows to the bottom, creating a vertical scrollbar.
I've tried a lot of things, but nothing's worked so far. Can you explain to me why introducing the div (image-container) changes the layout and how to make it behave like the version without the div? That'd be great, thanks in advance!
EDIT:
I want the image to be displayed exactly like in the snippet I posted. It should be as large as possible, but only so large that the whole image is still visible and nothing is cropped. For a wide window, there should be blank bars left and right of the image. For a narrow but tall window, there should be blank bars above/beyond the image.
My issue is that as soon as I add the <div class="image-container">, the image always takes the whole width. For a wide window, I get scrollbars and can't see the whole image anymore. I'd like to know how I can get the image to scale like in the version without the additional <div>. I'd also like to understand why adding the <div> changes how the image is scaled.
EDIT 2:
Someone suggested to add overflow: hidden; on .image-container, but deleted their answer. This does in fact work (overflow: hidden/scroll/auto; work, overflow: visible; does not), but now I'm completely confused to why that's the case. I thought that overflow would control if overflow is visible, but wouldn't affect the size of the content being displayed. In this case though, it seems like the overflow property does have an effect on the size of the picture being displayed. That's weird and if anyone knows what's going on, please let me know!
Flex is already helping the image take up as much space as possible, so the height: 100% and width: 100% were causing the image to grow.
For getting something to appear on top of the image, I would recommend looking into position: absolute or position: relative
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
display: flex;
justify-content: center;
}
img {
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<div class="image-container">
<img src="https://picsum.photos/500/300" />
</div>
</div>
</body>
</html>

Using flexbox and overflow hidden & scroll not working in Firefox?

I have a relatively simple skeleton for a 1-page site.
The header area I'd like to stay put which I accomplished (at least in Chrome and my smartphone's native browser) by setting overflow:hidden on the overall container, then setting overflow:scroll to the scrollable area.
But then I went to double check this on FireFox and basically ran into all sorts of issues. Troubleshooting resulted in a mind-numbing amount of things falling out of place.
<div id="mainBlock">
<div id="tabContent">
<div id="one">
<h1>one</h1>
</div>
<div id="two">
<h1>two</h1>
</div>
<div id="three">
<h1>three</h1>
</div>
<div id="four">
<h1>four</h1>
</div>
</div>
<div id="bottomBlock">
<div>hellow</div>
</div>
</div>
with these styling rules
#mainBlock {
overflow-y: scroll;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-flow: column;
align-content: center;
align-items: center;
}
#tabContent {
height: 100%;
width: 100%;
}
#tabContent > *{
height: 500px;
}
#bottomBlock {
background-color: #444;
height: 24px;
width: 100%;
}
When working, this results in the head area staying put while allowing for the rest of the content to scroll, with bottomBlock appearing at the end of the scrollable area.
However, in firefox, while scrolling is possible bottomBlock is stuck at end of initial viewport. As in if the viewport height is 900px, bottomBlock is seemingly absolute positioned at 901px.
If I move bottomBlock to within tabContent, then it works as it should.
But this issue has given me far too great of a headache to simply let it go.
I'm not sure how to make a fiddle of this, since the scroll bar is the main issue here, and fiddle's render box also has one.
Any help is greatly appreciated!
It works for me in firefox 45.0.1 if you remove the height:100% from #tabContent completely. What do you need it for? As the last block element #bottomBlock will always be on the very bottom.
Maybe it's a wierd css overriding/priority issue. I could imagine FF can't calculate the overall content height correctly because of the competetive #tabContent > * and #bottomBlock selectors.
Did you also try making tabContent as a class? Sometimes that solves strange css inherit or override problems (for me).

Why is my div resizing?

My header is structured as a table. I finally managed to make it so that the last li is floated to the right and X % to the left while still being compatible with different screen sizes. However, my 'profile picture' div is resizing and resembles a squished circle as a result. How do I make sure that the div is always 40px in width and height (if this is the right way to go around it)?
CSS
#hdr-profile {
align-items: center;
border: 1px dotted red;
display: flex;
margin-left: auto;
white-space: nowrap;
}
#hdr-profile-pic {
width: 40px;
height: 40px;
background: white url("https://scontent-lhr3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/11760274_1109394289087955_3712628479579288500_n.jpg?oh=ff64d9b1a44338d53d414459ff92aa71&oe=574558FA") no-repeat;
background-size: 100% 100%;
border-radius: 50%;
cursor: pointer;
}
HTML
<li>
<div id="hdr-profile">
<div id="hdr-profile-pic" title="My Profile">
<div id="hdr-profile-country" title="Liam is in Spain"></div>
</div>
<span id="hdr-profile-name" class="select">Liam Macmillan</span>
<i class="material-icons md-26 icn-lft icn-hvr">arrow_drop_down</i>
</div>
</li>
An easy way would be to add a !important after the 40px in your css of the profile picture
I suspect it's because of the size of the drop-down. In the JSFiddle that Nenad Vracar linked, the picture comes in totally fine. Don't use !important to force the size, it's bad practice and causes unexpected behavior. Instead, try experimenting with the size of the dropdown. I don't have the rest of your code, or I'd have looked into it.

Removing white space under nested img when resizing without squeezing image

I'm making a basic header using divs and a nested img in a fluid layout. I'm a bit rusty on this and i can't for the love of me figure out how to ensure that the image nested in the div scales without scaling to the point where it becomes smaller its parent div.
EDIT: Updated the codepen link showing how using min-height won't work as it squeezes the image
HTML:
<div class="container">
<div class="item half">
<p>
Some text
</p>
</div>
<div class="item half">
<img src="http://dummyimage.com/hd1080" class="full-width">
</div>
</div>
CSS:
.container{
margin: 0 auto;
max-width: 1920px;
}
.item{
height: 300px;
float:left;
overflow: hidden;
background-color: gray;
}
.half{
width: 50%
}
.full-width{
max-width: 100%;
}
And for good measure a quick illustration of what is happening:
And an illustration of what i want to happen:
Edit: Note that the image here is not being squeezed, which is what happens if you set the image to have a min-height equal to its parent div. But rather the overflow is hidden. You can also see that i do not mind the images being cropped.
Any help appreciated.
You can add min-height equal to the div.item height to your image CSS
img {
max-width:100%;
min-height:300px;
}
I've managed to find the solution i wanted in this thread. The function i was looking for was object-fit.
I've used the following solution:
img{
min-height: 100%;
object-fit: cover;
}
Edit: quickly found out that this property is only properly supported by Firefox, Chrome and Opera. Use this polyfill to fix this on Safari and IE.

Resize DIVs with background-image using CSS

I'm not one to usually ask, but I cannot seem to get this done using CSS/CSS3.
Note, i'll be happy even with a not-so-supported CSS3 style, like resize.
The jsFiddle for it.
The current unresizable code:
HTML:
<div id="boxes">
<a id="about1" class="aboutbox" href="/property-for-sale">
 </a>
<a id="about2" class="aboutbox" href="/why-cyprus"> </a>
<a id="about3" class="aboutbox" href="/why-zantis"> </a>
<span class="stretch"> </span>
</div>
CSS:
#boxes {
padding: 70px 0 70px 0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.aboutbox {
padding: 0;
margin: 0;
display: inline-block;
*display: inline;
zoom: 1;
width: 320px;
height: 225px;
vertical-align: top;
text-align: left;
background-size: auto auto;
}
#about1 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about2 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about3 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about1:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about2:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about3:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
If you resize the html panel, you'll see that they float as expected. I'm using a common method to distribute them equally along the parent div. I'm also using CSS to create a image button with hover effects (don't ask about the nature of the graphics ..).
I'd like to get these to resize accordingly when the html panel is resized; i.e. get the actual button to scale down and remain in one line.
I've got a working solution with jQuery, but spent my time getting this without it and got nowhere. Any ideas?
tia.
Aspect ratio
The main issue here is maintaining the relative dimensions of the images (the aspect ratio). A couple potential ways to do this without using JavaScript or jQuery are as follows:
Using foreground images (img tags).
Using calc() to make the height of the image wrapper be a fixed % of its width.
I didn't have much luck with calc(). The closest I got was attempting to make the height a fixed % of the viewport width (using the vw unit). It didn't seem very promising. I can't entirely rule out a solution being possible using calc(), but so far the only obvious CSS solution for maintaining the aspect ratio requires the use of foreground images.
Updated Demo
Hover state for foreground images
Achieving the hover effect using foreground images is fairly simple. Add a pair of images to each image wrapper, and apply the :hover pseudo-class to the wrapper to turn each image on or off as needed.
<a class="aboutbox" ...>
<img class="off" src="..." alt=""/>
<img class="on" src="..." alt=""/>
</a>
...
.aboutbox:hover img.off { display: none; }
.aboutbox img.on { display: none; }
.aboutbox:hover img.on { display: inline-block; }
Justifying images
The trickiest part of justifying the images is that there needs to be some whitespace between the image wrappers (in the HTML source code) for the justification to have a chance of working, for the same reason that words in a sentence need to have whitespace between them (otherwise, they'll be treated as a single word).
But whitespace between inline-block elements in the HTML source code causes 3-4px of horizontal spacing to be added between the elements (with no CSS solution available for avoiding it that's truly cross-browser and safe). That extra space, although necessary for the justification to work, is mostly likely unwanted visually and may prevent all of the images from fitting on the same line in some cases.
Here's an initial demo with a crude solution: limiting the width of each image to 31%, to allow enough room (on most screen sizes) for the whitespace between the image wrappers.
The other issue with justifying the images is that, as with text, justifying images only works if the content spans at least 2 lines. One workaround for this is to add a span tag at the end of the content with display:inline-block and width:90%. The initial demo demonstrates this.
#media queries
It's worth noting that the justification is only needed when the screen is wide enough to allow extra space between the images. #media queries can be used to only apply the justification on large screens. On small screens, the image wrappers can be floated so that there's no extra space between them.
Updated demo using #media queries
One solution is to replace the background image with an actual image. And use css to control what image is displayed, and to resize based on the containing elements. So you wrap each link in a div, which re-sizes based on your boxes container. Using css you set the image url using the content: selector.
http://jsfiddle.net/CPNbS/6/
Your resulting html looks something like:
<div id="boxes">
<div class="link" id="about1">
<a class="aboutbox" href="/property-for-sale"><img /></a>
</div>
<div class="link" id="about2">
<a class="aboutbox" href="/why-cyprus"><img /></a>
</div>
<div class="link" id="about3">
<a class="aboutbox" href="/why-zantis"><img /></a>
</div>
</div>
and the css:
.link{width:30%;height:100%;border:1px solid green;display: inline-block;
*display: inline;
zoom: 1;}
.link a{padding: 0;
margin: 0;
display:block;
width: 100%;
height:100%;
vertical-align: top;
text-align: left;
background-size: auto auto;}
.link a img{max-width:100%;}
#about1 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about2 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about3 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about1:hover a img,#about2:hover a img,#about3:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}
You could also use a responsive design technique by including media queries. But this is more for different devices rather than re-sizing, so does not look as 'fluid'.
Hope this helps...
To do this with background images as you've set it up, you have to get rid of the width setting on the each item, and size the background image with background-size: 100% 100%; To maintain the height to width proportion of the .aboutboxes, use the intrinsic ratio method here with a percentage based padding-bottom. More here: http://alistapart.com/article/creating-intrinsic-ratios-for-video
.aboutbox {
position: relative;
padding-bottom: 70.3125%;
display: block;
width: auto;
height: 0;
background-size: 100% 100% !important;
}
If you'd like you can include a max-width or padding on the wrapper to limit how far they stretch.
Updated your fiddle here: http://jsfiddle.net/carasin/s4pUe/11/
Just be aware of some limited IE support of background-size: http://caniuse.com/#feat=background-img-opts
#boxes {
white-space: nowrap;
}
boxes a{
display:inline-block;
width: 33%;
background-size: cover;
}
but I'd rather use img tag see http://jsfiddle.net/Vicky_007/GZMvT/14/
and you can also emulate table:
#boxes {
display: table;
width: 100%;
table-layout:fixed;
}
#boxes a{
display:table-cell;
background-size: cover;
}