whitespace: nowrap for photo has issue when resize - javascript

I tried to display my photos horizontally, so i used
.stream {
white-space: nowrap;
}
.mod-pic {
padding-left: 5px;
}
.modelstream {
display: inline-block;
max-height: 90%;
width: auto;
}
for my photo's css
html looks like this: (I used javascript to render the photos)
<div class="stream">
<div class="alexContainer"></div>
<div class="template main alexTemplate">
<div class="mod-pic">
<img class="pic modelstream" src="" alt=""/>
</div>
</div>
</div>
The problem is when I resize the browser, the margin of the photo become too big, although
I want the photo to be responsive, but I don't want the margin between photo become too
big.
Can anyone help me to fix this problem? I would really appreciate it!
Thanks

It looks to me like your container div/divs are becoming too wide when the window is re-sized. I think using CSS to set the max-width on one or more of the outer divs would solve your problem.

Related

IOS stretches an image

I have a logo on my website. The code is as follows:
footer .logo {
margin: 1px auto 26px auto;
width: 150px;
}
<footer>
<div id="footer" class="container">
<div class="row">
<img class="logo" src="logo.png">
</div>
</div>
<!-- more content here -->
</footer>
For the sake of the question, I'm replacing the logo with a banana.
It looks good on desktop, android and simulated ios devices:
what the image should look like
But something happens in real ios devices that does not happen in the simulators:
what it looks like on an actual ios device
It appears that on an IOS device the image is somehow enlarged and then compressed into the width of 150px. Strangely this is the only image that behaves like this from all the images on the website.
Do you know what might be causing this or how to fix it?
try with max-width
footer .logo {
margin: 1px auto 26px auto;
max-width: 150px;
}
It turned out that div.row was the culprit as it had display: flex. Changing to display: block fixed it.

Text Overlay on Image Hover - Responsive

I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!
Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;
In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->
I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE

How to fit a list of images in an HTML div to form a 2D grid?

EDIT: Problem fixed. See my own answer for details. Will mark it as the answer in 2 days when SO lets me.
I am populating a div with a list of square images using Knockout. The div is currently of fixed width and height, though will eventually be resizeable. I would like the images to fill up the div row by row. So when image n reaches the boundaries of the div's width, image n+1 is wrapped around to the next row. Currently, the images flow over the boundaries of the div to fill the entire window.
The current markup is as follows:
<div data-bind="foreach: images" width="500" height="500">
<img data-bind="attr: { src: fileName }">
</div>
I've played around with float and overflow with no success so far. I've also tried putting the images in their own divs. The images exhibit the wrapping behaviour I want in the whole window to form a grid, just not in the div I've put them in.
How do I make the images stay inside the div while getting the grid that I want? Is this possible with HTML/CSS alone or does it require some Javascript?
As Daniel Weiner said in his comment - floats are the way to go. Add in display : inline-block; to keep each element aligned. Example:
#container {
width: 100%;
background-color: black;
display: inline-block;
}
.block {
height: 100px;
width: 100px;
background-color: #fff;
margin: 10px;
float: left;
}
<div id=container>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
</div>
My problem was that I was not specifying the length units for my containing div. In my original markup, I was using the HTML attribute width="500". Changing this to inline CSS and specifying the length unit solved the problem, keeping my 2D grid inside the div: style="width: 500px"
Besides this, as suggested by wahwahwah, the following style was required for a containing div for each image: float: left;
Inlining the CSS, the end result is:
<div data-bind="foreach: images" style="width: 500px">
<div style="float: left;">
<img data-bind="attr: { src: fileName }">
</div>
</div>

How to create a responsive image that also scales up in Bootstrap 3

I am currently using twitter bootstrap 3 and I am facing a problem to create a responsive image. I have used img-responsive class. But the image size is not scaling up. If I use width:100% instead of max-width:100% then it works perfectly. Where is the problem? This is my code:
<div class="col-md-4 col-sm-4 col-xs-12 ">
<div class="product">
<div class="product-img ">
<img class="img-responsive" src="img/show1.png" alt="" />
</div>
</div>
</div>
Bootstrap's responsive image class sets max-width to 100%. This limits its size, but does not force it to stretch to fill parent elements larger than the image itself. You'd have to use the width attribute to force upscaling.
http://getbootstrap.com/css/#images-responsive
Sure things!
.img-responsive is the right way to make images responsive with bootstrap 3
You can add some height rule for the picture you want to make responsive, because with responsibility, width changes along the height, fix it and there you are.
I had to do a small trick to make the image bigger but keeping it responsive:
#media screen and (max-width: 368px) {
img.smallResolution{
min-height: 150px;
}
}
P.S. The max width can be anything you like.
If setting a fixed width on the image is not an option, here's an alternative solution.
Having a parent div with display: table & table-layout: fixed.
Then setting the image to display: table-cell and max-width to 100%. That way the image will fit to the width of its parent.
Example:
<style>
.wrapper { float: left; clear: left; display: table; table-layout: fixed; }
img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
<img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>
Fiddle: http://jsfiddle.net/5y62c4af/
Try the following in your CSS stylesheet:
.img-responsive{
max-width: 100%;
height: auto;
}
Try to do so:
1) In your index.html
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
</a>
</div>
2) In your style.css
.ratio {
position:relative;
width: 100%;
height: 0;
padding-bottom: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
I found that you can put the .col class on the image will do the trick - however this gives it extra padding along with any other attributes associated with the class such as float left, however these can be cancelled by say for example a no padding class as an addition.
I guess image is than corrupted.
Example: image size is 195px X 146px.
It will work inside lower resolutions like tablets. When you have 1280 X 800 resolution it will force larger as there is also width 100 %. Maybe CSS inside media query like icons fonts is the best solution.

Stellar.js background attachment set to fixed but crazy jitter still happening

As the title suggests, I'm using Stellar.js. I only have one parallax element, and it's very simple. It's a section with a background image. The background image is set to fixed (like the documentation says to do to avoid jitter), but the image is still jittery--somewhat in Chrome, really bad in other browsers. It doesn't change when I remove the fixed CSS either.
Here is the element:
<!--Testimonial Section-->
<section id="testimonial" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-900">
<div class="container">
<div class="row">
<div class="span3 margin-30">
<img src="img/testimonial-img.png" alt="Title">
</div>
<div class="span9">
<h2>“Lava has been an asset to our company by providing us with a cutting edge look and a web presence that shows off our work and skills.”</h2>
<div class="testimonial-source pull-right">Jeff | Ceo - Creative Company</div>
</div>
</div>
</div>
</section>
And here is the CSS:
#testimonial {
background: url(../img/studio-10.jpg) no-repeat center;
background-size: 2000px 2000px;
background-attachment: fixed;
padding-top: 120px;
padding-bottom: 120px;
}
Pretty straightforward. Any advice?
The problem wound up being an image tag that was in the same div as the background image that was involved in the parallax scrolling. Upon removing this image, jitter stopped.
Have you tried using smaller images? Those used in stellar's demo are smaller (1280x640px) and do not have the background-size property. Try with smaller image and/or without the background-size property - that may cause those performance problems.
try this
#testimonial {
background: url(../img/studio-10.jpg) no-repeat 50% 0 fixed;
width: 2000px;
height: 2000px;
padding-top: 120px;
padding-bottom: 120px;
}
I know this is an old question but changing $.stellar() or $(window).stellar(); to :
$.stellar({
hideDistantElements: false
});
solved the flickering issue for me.

Categories

Resources