I am a 3D artist by profession, however I have recently been trying to create a website for myself from scratch. My needs are very simple - a widescreen website which consists of a background image and thumbnails which once clicked load a overlay pop up showing further information on that particular content. The pop-up overlay is not the issue here.
My current problem is that I need my page to always be 100% of the browser width, so that means it must scale - along with all the content (thumbnails) in it. I created my first attempt on a screen which is 1920x1080 and the result was perfect, however - when I loaded it on my laptop which has a 1366 screen, it resulted in only showing me a slice of the full page, and gave me scroll bars to view the rest.
I am placing the thumbnails via px as I have got the values from Photoshop but I understand that my needs can only be accomplished via % - how can i overcome this?
Here is a visual of my setup http://i.imgur.com/ZdgTRYk.jpg
Grey is browser window
Red is background
Green is content
Everything should scale at the SAME rate.
Here is my HTML
<body>
<div id="background">
<img src="images/background.png">
<div id="box3thumb">
img src="images/box3thumb.png">
</div>
</div>
</body>
and my CSS
#background {
position:relative;
left:0px;
}
#box3thumb {
position:absolute;
left:514px;
top:117px;
width:92px;
height:200px;
}
I really appreciate any help I might recieve on this.
Thanksm
Elliott
ok, for your #background, you can use this css to scale the browser:
#background{
width: 100%;
background: red;
}
and for your thumbnails, I don't understand very well how you want them placed, but according to your image, you'll need to put them inline:
#thumbnails{
display: inline-block;
margin-left: 15%;
}
The % of the margin may vary depending on what you want.
If you set the body and html elements of your page to
CSS:
html, body
{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
This will prevent scrollbars from appearing, while maintaining the full width and height of the screen, regardless of resolution. As for your thumbnails, if you have a set number of thumbnails then you can set the widths of your thumbnails to say, 10% width and height with a margin: 1%;, this will allow you to fit roughly 64 thumbnails, but they will get small if the user has a shitty resolution.
.thumbnail
{
position: relative;
display: inline-block;
width: 10%;
height: 10%;
margin: 1%;
}
EDIT ------------------
With large thumbnails like that you could make it more like this:
.thumbnail
{
position: relative;
display: inline-block;
width: 20%;
height: 20%;
margin: 5%%;
}
Use in style.css
#background{
width: 90%;
background: red;
}
/*thumbnails*/
#thumbnails{
display: inline-block;
margin-left: 10%;
vertical-align:text-bottom;
}
Related
I want to prevent page-reflow, caused by image loading on a web page.
Page reflow occurs when images load after the page's text content has already rendered. There's a 'jerk' caused by the said page-reflow. It makes for awful user experience.
My requirements are:
(i) All images be fully responsive
(ii) Have a max-width of 450px (while maintaining aspect-ratio)
(iii) Be center-aligned within their containers
There can be several images on the page. All have different aspect ratios (but scaled to the same width - i.e. 450px). I know their dimensions beforehand.
Currently my code is simply:
.container {
text-align:center;
overflow:hidden;
background:whitesmoke;
border-top:1px solid #F0F0F0;
border-bottom:1px solid #F0F0F0;
}
.container img {
width:100%;
max-width:450px;
vertical-align: top;
}
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
This fulfils all my requirements - except it can't prevent page reflow. How do I tweak this to get my desired result?
Traditional solutions to prevent such page-reflow go something like this:
HTML
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
CSS
.container {
display: block;
position: relative;
padding-bottom: calc(100%/(450/562));/* example width=450px height=562px*/
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This works fine. But it doesn't impose a max-width like I need it to. The image fills the entire container - as large as that container is (e.g. the full width of the screen on a laptop).
To tweak it, I tried adding max-width:450px;max-height:562px in .container img. That corrected the image's dimensions. But it gave the container extra padding at the bottom:
That's a shame. What I really wanted was for it to look like below:
Note that the gray colouration above is the background container, which simply disappears on smaller resolutions:
What's the best way for me to achieve my requirements? An illustrative example would be great.
Note: adding max-width: 450px;max-height: 561px; in .container doesn't solve the problem either.
I have 2 images left and right from center which are placed nicely, but when the screensize is < 1920px, a scrollbar is created because the right image is going "out of the Site". I just want it to be cut to the screensize / go over the side of the screen without widening it.
CSS of the images (simply placed in the body):
#fans_l {
position: absolute;
text-align: left;
margin-left: -955px;
margin-top: -228px;
z-index:3;
}
#fans_r {
position: absolute;
text-align: left;
margin-left: 399px;
margin-top: -228px;
z-index:3;
}
Body css:
body {
height: 100%;
width: 100%;
margin: 0px;
background-image:url(p/back.jpg);
background-repeat: repeat; text-align: center;
}
In this case, there are a few things you can do. The first two that come to mind are as follows:
You can declare in the body css that the overflow-x property be set to either none or hidden, effectively cutting off your excess pixels. Though, at a fixed image size, this may not be desirable on smaller browsers. Keep in mind that many people have monitors smaller than 1920px.
You can use a nifty little tool present in CSS3 called Media Queries. With them, you can change css rules based on a monitor width or height. Using this method, you can ensure that it appear full on all sizes of browser windows.
I got a question: I have an image in a div. the image is bigger that the div and it has height:100% to make it look ok. So when I do a resize image becomes bigger and it looks fine. but when I resize the browser to make it smaller image becomes smaller, but its parent saves the width of the original image. In fact it just takes the width of an image. I got a fiddle for you, just try to resize your browser or the output section to see the red background appear. I'm curious is there any chance to make the div dimenstions the same as the image's dynamically. I need the container dimensions cause I have some other elements besides the image and they use the coordinates of the div. thanks.
important! it works the way I saw it only in FireFox. Chrome's behaviour is different.
.img-wrapper {
display: inline-block;
height: 100%;
position: relative;
background-color: red;
}
.gallery-image {
bottom: 90px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 25px;
background-color: grey;
}
img {
height: 100%;
}
<div class="gallery-image">
<div class="img-wrapper">
<img src="http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg" alt=""/>
</div>
</div>
This is usually done with CSS using background-image:url("http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg").. This way your image and div become one object. Then you just control the div and the background image size accordingly.
Side Note... It helps with performance as well.
You can set the minimum dimensions of an image so it won't become any smaller like this
img {
min-height: 200px;
min-width: 400px;
}
Is it possible to change the height of an HTML element when the viewport resizes with pure CSS? It's hard to explain the problem, but I'm still going to try:
What I want, is a page with a header, content and a footer, like most webpages. As I'm working with a 1920x1080 monitor, I'm using that as my standard. The problem however is that not everyone is using a 1080p monitor. Some are using the older standard, 1280x1024 or using a tablet where the height can be 2560px (I'm not doing smartphones, as they will have a completely different design due to the small screen width). On my page I have images, covering a fixed width. If this width is greater than the width of the viewport, the images will be displayed underneath each other:
(Right-click on the image and select "show image" to view at full size)
As you can see in this image, when the viewport is smaller, the images will stack and will fall from the background. The 'Follow me on:' section even felt of entirely. What I want to do is, when this happens, to make the content div larger, so all of the content stays on the page. I know this is possible using height: auto, but when you do that, the fixed height of the footer will follow after it, and on a screen with a large height, there might be a white border because the document height is smaller than the viewport height.
Take some time to learn min-width, min-height, max-width, max-height, (css attributes) and device-width, device-height (css default values of the client viewports). I can not guarantee they would refresh while you drag/resize the browser window or viewports in devices, but I think they help your style rules.
It's slightly unclear to me what your end-goal is with this so I did my best interpretation. If it's not what you're looking for, give me a good mental image of what you're trying to do and I'll try to correct it.
Live Demo
CSS:
html, body {
box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrap {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
}
#header, #content, #footer {
position: absolute;
width: 100%;
}
#header {
top: 0;
height: 70px;
background: lightblue;
}
#content {
overflow-y: auto;
top: 70px;
bottom: 70px;
background: limegreen;
}
#footer {
bottom: 0;
height: 70px;
background: purple;
}
HTML:
<div id="wrap">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
I'm trying to scale images to the height of their parent which has a percentage height of its parent. This works as expected except in Chrome where the image won't scale its width proportionally once the height is reduced below the size at which it was first rendered. Any ideas on how to fix this?
<div>
<img src="http://placehold.it/100x100" alt="">
</div>
and the css:
html, body {
height: 100%;
margin: 0;
}
div {
height: 70%;
background-color: red;
}
img {
height: 100%;
width: auto;
}
JSFiddle
Removing the width property fixes this:
img {
height: 100%;
}
I'm not sure why this happens, but I'm guessing that making the width always at auto would fallback to the original width when the image is scaled down (this doesn't happen in most cases I've tried, but a certain combination might trigger it to happen that way). Not sure if it's by design or not, but I'll go ahead and try to report this somewhere.
Fiddle
Try using display: block; to make Chrome scale the image below the rendering-size:
display: block;
min-height: 100%;
height: 100%;
width: auto;