I know this question must sound familiar, and I can see loads of people asking similar questions but none of the answers are working for me. Everyone has a fairly specific need. I want to understand the basics and I can work out the rest.
I have a simple angular/bootstrap web page. I have made a carousel component and I want to ensure the user always sees the entire image. I have seen lots of answers which suggest img-fluid, max-with, max-height etc., but nothing's working for me. It's sort-of working for landscape images but not for portrait images. I need it to always show the whole image regardless.
Here is the basic app component:
<app-nav-menu ></app-nav-menu>
<div style="padding:10px">
<router-outlet></router-outlet>
</div>
The router-outlet goes to this "about-us" component:
<div class="row">
<div class="col">
<app-carousel [slides]="slides"></app-carousel>
</div>
</div>
And the carousel component looks like this:
<div class="container">
<div class="row">
<div class="col">
<div>
<img [src]="slide.src">
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
{{slide.text}}
</p>
</div>
</div>
</div>
</div>
As you can see it's really simple. Right now there is no styling other than the little bit in the p tag which is to center the text in the image. This is not working properly now, because I think I've lost the container whilst trying out different solutions. I don't like CSS because I'm not used to them and I like to see the styles where they belong so I can understand better. But feel free to suggest a CSS solution if necessary.
So the question is simple: how can I make the image always fit the screen and not spill downwards?
Thanks
Did you try the object-fit property?
object-fit: cover;
If your image aspect ration is good, it shows the entire image.
object-fit: contain:
This shows the entire image, but if the aspect ratio is not good, it shows blank spaces around the image.
Thanks SureN.
I tried both of these but they didn't work. Perhaps they would do if I knew how to use them better.
In the end the following more or less worked for me, in the img tag:
style="max-width: 100%; max-height: 100vh; display: block; margin-left: auto; margin-right: auto;"
It's not perfect but it'll do for now!
Related
I'm working on a mobile app. It's a protected website using jQuery mobile for the presentation framework. The protected content, the list of team members, is delivered via Ajax after authentication and identity verification. Here's a screen shot from my phone. The site is responsive, and can be used by desktop, tablet or mobile. Obviously it's optimized for mobile with tel:, sms: and mailto: links
I don't understand the odd corners on the images. This is erratic, and happens 75% of the time. This only happens to the upper left hand corner of the top image in the list, and the bottom left hand corner of the bottom entry in the list, no matter how long the list is. Generally, the corner displays round if you refresh the screen. I'm sure its some sort of timing issue, but I've not seen it before. I'm using iphone 6 with Safari browser for that screen shot. I see the exact same thing in Chrome on my laptop in desktop mode. I don't think this is a device or browser dependent issue.
HTML:
<div id="page6_team_phones">
<div role="main" class="ui-content jqm-content">
<h2>Phone Contact List</h2>
<ul data-role="listview" id="phonelist" class="ui-listview">
<li class="ui-li-static ui-body-inherit">
<div class="img_container"><img class="img-photo" src="https://images.unsplash.com/photo-15..."></div>
<div class="userName">Andrea Apple</div>
<div style="clear: both;"></div>
<div class="phoneNumber">1234567891</div>
<div class="sms"><img src="../images/crosstxt-icon.jpg"></div>
<div class="email"><img src="../images/email-icon.png"></div>
</li>
<li class="ui-li-static ui-body-inherit">
<div class="img_container"><img class="img-photo" src="https://i.imgur.com/KOXOBiN.gif"></div>
<div class="userName">Bill Banana</div>
<div style="clear: both;"></div>
<div class="phoneNumber">9876543211</div>
<div class="sms"><img src="../images/crosstxt-icon.jpg"></div>
<div class="email"><img src="../images/email-icon.png"></div>
</li>
CSS:
.img_container {
float: left;
}
.img-photo {
height: 24vw; /* photo = square aspect ratio */
width: 24vw;
object-fit: cover;
border-radius: 20%;
}
Anybody understand exactly what is causing this issue? Why only top left and bottom left? Best way to improve the display?
Upon inspection, I've found that jQuery mobile has some CSS that affects the first and last elements in your list. You could modify the styles directly, but it's probably much better to override the jQuery mobile CSS by adding !important to the property (border-radius: 20% !important;). Doing that in your JSFiddle fixed it for me.
Here's a fixed example.
I know there's already an accepted answer but it feels more like a patch than a full understanding.
That rule only triggers for any element that is NOT of a class .ui-li-icon as you can see below:
.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon)
So simply add that class to your image like so:
<img class="img-photo ui-li-icon" src="https://images.unsplash.com/..." onclick="openImgModal(this.src)">
This will tell CSS to NOT apply those rules.
When I try to make an HTML background color fill for a div, it ends up with a huge amount of extra space at the bottom - I want to make a sort of header, but it becomes really wide. Can someone help me with this?
My HTML is
<div class="header">
<h1>Welcome to My Site</h1>
</div>
My CSS is
div.header{
background-color:grey;
}
Thanks!
I would recommend adding width, height, and margin to your code. You can experiment with your code with a website like codepen.io! Below is a link to an example of what I'm talking about.
https://codepen.io/wykydtronik/pen/VpEGer
div.header{
background-color:grey;
width: 350px;
height: 150px;
margin: 0 auto;
}
If you look at the CSS code you will see I set a width of 350px, and height of 150px. I also added a margin: 0 auto; to make the header div to be center. It's a neat trick that isn't intuitive until you've seen it a few times.
Let me know if this helps, good luck!
I advise you to use bootstrap, there is lots of community support and documentation and you can even override colors and styles for yourself.
Bootstrap well class could work for you.
<div class="well">
Look, I'm in a well!
</div>
Or the jumbotron for bigger impact.
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
I'm creating a website for a company and their photographer asks me what dimensions the pictures on the website are.
I work with CSS Bootstrap and grid system like:
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/xxxx-1-2.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3 style="height:5%;"> “text"”</h3>
</div>
</a>
</div>
</div>
So on the server the images had a size of 474 x 698 pixels, but the grid system crops the image a bit?
What size/dimension does the grid system use?
Thanks a lot
I think all you need is some css to make your images adopt to a screen of the device. A good practice, that I usually do, is to place this line of code inside my css.
img {
max-width: 100%;
}
Make sure it's at top of your first imported document, so you can override it with out any trouble in case you need some other image width.
PS. This rule should be in bootstrap, so check how you adding bootstrap to your webpage.
What you can do is add a css for this background image.
.fh5co-grid{
background-image: url(images/xxxx-1-2.jpg);
background-size: cover;
background-repeat: no-repeat;
}
If you want to make sure this code will get the full screen width, make sure your html col-lg-12 is wrapped on a container-fluid.
I want to incorporate an image that sits on top of an existing image (and maybe straddles two different divs. In general, I would just like to see what general html structure you'd suggest -- and any CSS rules I should include. I've spent hours trying to replicate the structure I wanted -- but after inspecting elements and trying to de-construct and re-construct I was unable to produce anything close to what I wanted.
Also, in the example provided below -- I noticed the overlapping image was placed inside a span tag. Any idea why? If you could just roughly describe how you'd approach this kind of design -- that would be awesome!
This is a pretty neat effect. This is one way out of multiple you can do.
The trick is to have a fixed height on your div with background, and inside it, another div that contains the image.
I've tried to keep height/widths pretty small so you can check them correctly on the embedded snippet. I've tried to keep styles as minimal as possible to recreate what you asked for.
Let me know if something like this does the job.
.first-image{
background: #eee;
height: 250px;
}
.container{
width: 95%;
margin: 0 auto;
max-width: 400px;
}
.container--padding{
padding: 1rem 0;
}
.second-image{
margin: 2rem auto;
}
<header>
<div class="first-image">
<div class="container container--padding">
<h2>I'm the cool title headline.</h2>
<button>Download</button>
</div>
<div class="second-image">
<div class="container">
<img src="http://placehold.it/400x190" alt="placeholder" />
</div>
</div>
</div>
</header>
In the example you're referring to, the images are not <img /> tags but <div /> overlapping on top of each other. Both of these <div /> have a background image.
There are multiple solutions to make 2 <div /> overlaps, you could use absolute positioning, float, negative margins, having the background in a parent <div /> with a height greater than the height of the background image, etc.
For example, using negative margins, if I have 2 <div /> following each other like:
<div class="bg1"></div>
<div class="bg2"></div>
I could simply add a negative top margin to the second one to make it appears on top of the first one to give an illusion of overlapping like:
.bg2 {
margin-top: -40px;
}
You can check an example using negative margin on this JSFiddle.
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help