Heres my CSS that I have for my img syntax. However, it should responsively resize while the browser resize. This works in Chrome, but IE & FIREFOX for some reason aren't working - is there a reason why? I am using the latest of all.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
The img max-width: 100% is a good technique for responsive images, but it needs to work together with the image container - element that holds the image / wraps it - for you to see the responsiveness of it in action.
Try this and you should get it working cross browsers:
<div class="imgHolder">
<img src="http://www.thoughtfeast.co.uk/wp-content/uploads/Big-Data-2-1024x522.jpg" >
</div>
So your image is wrapped with a div. And the CSS would be:
.imgHolder{
width: 100%;
max-width: 1000px;
padding: 10px;
border: 3px dashed red;
margin: 10px auto;
}
.imgHolder img {
max-width: 100%
}
You can check the codepen here
Related
I'm trying to show an image in a "lightbox" style so that it will fill the available area on screen, in this case 90% of the width of the page and 70% of the height.
Using object-fit: contain; seems to be the de facto way to do that but it's not quite working with border-radius. Is it possible to use object-fit on an <img> and still have the border radius applied as intended?
You'll need to resize your browser window to see what happens when you run the below snippet. I've got the same code running in JSFiddle, as per the below video.
div {
margin: auto;
width: 90vw;
height: 70vh;
background-color: DeepSkyBlue;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50px;
background-color: Crimson;
}
<div>
<img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>
Contain isn't really helping here.
Instead, set the max width and height of the img to 100%. The system will fit it in either totally top to bottom or side to side, but the img element will have whatever dimensions it needs so the border radius will work on it OK.
To center the img, if that is what you want, you can display: flex the parent div and justify/align items to the center.
div {
margin: auto auto;
width: 90vw;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
background-color: DeepSkyBlue;
}
img {
max-width: 100%;
max-height: 100%;
border-radius: 50px;
background-color: Crimson;
}
<div>
<img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>
As commented, setting max-width and max-height seems to be what you need or expect:
div {
margin: auto;
width: 90vw;
height: 70vh;
display:grid;
background-color: DeepSkyBlue;
}
img {
max-width: 100%;
max-height: 100%;
margin:auto;/* x,y center if inside a grid or flex box */
object-fit: contain;/* useless by now, img should keep its ratio */
border-radius: 50px;
border-radius: calc( 5vw + 5vh); /* will scale, maybe you find this usefull */
background-color: Crimson;
}
<div>
<img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>
Use object-fit: cover; instead of contain
I have an <img> inside a <div> with display: flex. The images is resizing without keeping the aspect ratio but when I reload the page it appears resized properly. Why does this happens and how can I resize the image inside a <div> with display: flex properly without refreshing the page?
Here is a .gif of the issue:
Here is the code:
UPDATE: The default code snippet from stackoverflow seems to resize properly until 220px height but the reported issue happens in codepen (https://codepen.io/guizo/pen/XKPdKK?editors=1100#0) and if I open the html file on Chrome, Firefox and Edge.
* {
margin: 0 !important;
padding: 0 !important;
}
html, body, div {
width: 100%;
height: 100%;
}
div {
display: flex;
justify-content: flex-end;
}
img {
max-width: 100%;
max-height: 100%;
}
<div class="content">
<img src="https://pixabay.com/static/uploads/photo/2016/01/19/18/00/city-1150026_960_720.jpg" alt="" />
</div>
Here is my css:
.contain
{
min-width: 300px;
background: black;
height: 200px;
display: inline-block;
overflow: auto;
}
.inl1{
/* margin: 5px 5px 5px 5px; */
min-width: 300px;
background: blue;
width: 400px;
height: 200px;
}
<div class=contain>
<div class=inl1></div>
</div>
<div class=contain>
<div class=inl1></div>
</div>
Clearly the two divs display inline, which is what I want.
However, when the browser is resized smaller the divs are displayed one above the other (desired behaviour), but once I make the browser window smaller than min-width, I need to have horizontal scrollbars displayed. This is not happening.
Any help as to why?
Edited: I tried the suggestions here, but they all seem to break the desired behaviour of the divs stacking on top of each other when the browser is sized smaller.
The effect I am after:
display the divs inline (with no scrollbars) in a browser that is wide enough; but in a "narrow" browser (ie mobile) display the divs one on top of another and THEN add horizontal scrolling ONCE the min-width can no longer be displayed for each div.
I think that's a little clearer...
You just need to have a wrapper for the divs and set it with
.wrapper{
min-width: 100%;
white-space: nowrap;
}
Here is the Fiddle: https://jsfiddle.net/1hshzxah/3/
Your outside boxes have the same minimum width as your inside ones, so both will be at least 300px wide, so no scrollbars appear. Because of the defined pixelwidth of your outer elements, your they will not stack next to each other if you do not have 600 pixels to play with or more. If you give your outer boxes a width that can scale (by using % or vw) with the page width, your result magically appears:
.contain {
width: 45%;
background: black;
height: 200px;
display: inline-block;
overflow: auto;
}
.inl1{
/* margin: 5px 5px 5px 5px; */
min-width: 300px;
background: blue;
width: 400px;
height: 200px;
}
#media all and (max-width:600px){
.contain {
width: 100%;
}
}
<div class=contain>
<div class=inl1></div>
</div>
<div class=contain>
<div class=inl1></div>
</div>
(I use 45% because I did not want to bother with floating these nicely next to each other, but you could with some more CSS). You can still add a max-width of 300 pixels to your containers to make sure they don't grow beyond 300px, but still shrink otherwise.
I just finished the landing page for a nonprofit's holiday campaign. I am having a little trouble with some little finishing touches.
Currently, there is extra white space on the right side of the page triggering the horizontal scroll bar in browsers. I am not sure why, I'd like for the page width to adjust to screen size along with the elements.
Also, I am having trouble with the styling of the four images of the people being featured. I'd like the images to display on the same row with no spacing in between when screen is minimum 1200 pixels, each image is 300 x 300 pixels. Otherwise, I'd like them stacked one on top of each other centered on the screen (for mobile). They are stacking, but are displayed to the left.
I am not the savviest of programmers as I am NOT a web developer. I am actually a the Social Media Specialist for the nonprofit. I appreciate your help.
Page can be accessed here:
https://secure3.convio.net/little/site/SPageNavigator/Holiday%20Page%20Wrapper/HolidayCampaign2015.html
Best thing you can do is wrap everything inside tag to a new div & set overflow:hidden;
<body>
<div class="wrapper">
Every other HTML will go here...
</div>
</body>
CSS
.wrapper {
overflow: hidden;
}
ALSO: It is not best practice to call scripts/css inside body tag. Those should be called inside tags
Try placing everything in a Wrapper div with the folowing css:
.container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
You could also try playing around with:
overflow-x: hidden;
For the whitespace (and scrollbar being displayed), add CSS for .row { margin: 0 !important; }. You currently have -10px +10px... I never understood why that was the bootstrap standard.
For centering the images, you want to add margin: 0 auto; to the parent div.box of the image.
The problem is all this margin fudging:
#media (min-width: 480px)
.row {
margin-left: -10px;
margin-right: -10px;
}
.row, #content-wrapper .fc-section__inner, .fc-section-outer .fc-section-row, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
.row, #content .fc-section__inner, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
After I turned all that off, things seemed to line up correctly.
Apply this to your CSS maybe styles.css it looks to be the stylesheet with the highest priority.
html,
body {
box-sizing: border-box;
width: 100vw;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* place this div right aftter thr <body> and before the </body> */
#jar {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
overflow-y: auto;
}
UPDATE
I forgot to post a solution for your images. This code applies to an element wrapped around the images. Most people use a <div>, but I'm using a <figure> since it's semantically proper.
Using max-content on a container like .frame makes it act like shrink wrap. You need to use the vendor prefixes which is a pain as you can see you have to write out height and width 3 times each.
You might have to use negative margins and reset padding and borders to 0 in order to get rid of the space in between the images.
.frame {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
height: -moz-max-content;
height: -webkit-max-content;
height: max-content;
margin: 0 auto;
max-width: 100%;
height: auto;
border: 0;
}
.frame img {
padding: 0;
margin: -2px;
border: 0;
display: inline-block;
width: 24%;
height: auto;
}
<figure class="frame">
<img src="http://placehold.it/150x85/000/Fff.png&text=FIRST" />
<img src="http://placehold.it/150x85/048/Fee.png&text=SECOND" />
<img src="http://placehold.it/150x85/fa8/375.png&text=THIRD" />
<img src="http://placehold.it/150x85/9a7/a10.png&text=FOURTH" />
</figure>
I have Div Container with css class:
.content4
{
height: 1400px;
width: 920px;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
padding-bottom: 25px;
padding-top: 25px;
background-image: url(../images2/bg.gif);
}
and i need to make it auto height for its content
its working properly in IE but doesn't work in firefox.
any help please?
Use something like that:
.test
{
min-height: 300px;
height: auto !important; /* for other browsers */
height: 300px; /* for IE */
}
If I understood the case correctly, your style is working like it should (in FF, of course :)) If you specify the particular height, the div should not change its height when its content wants more. What you observe in IE is that it's actually treating a "height" as a "min-height".
The solution here is to specify min-height for browsers, and height for IE :)