this is my first post so excuse my lack of information and flow of things.
The images on this site that im working on are not resizing correctly in chrome; max window size. i see that the images dont want to stretch but they are far too big. I built the site in dreamweaver so it shows everything working fine on its end but in chrome its not correct.
html img 1
<section class="intro">
<img src="hglogo.jpg">
</section>
css img 1
.intro img {
width: 100%;
max-height: 100%;
}
html img 2
<section id="bio">
<ul class="img-list">
<li>
<img src="img/bg4.jpg"/>
<span class="text-content"><span><h2>Who Is Henry?</h2>
...
css img 2
#bio img {
width: 100%;
max-height: 100%;
}
I would appreciate any help thanks
instead of this:
#bio img {
width: 100%;
max-height: 100%;
}
change to this:
#bio img {
max-width: 100%;
height:auto;
}
That's because of the max-heigth: 100%. Putting this will make your image stop scaling when it's at 100% of his height-size. Replace it by height: auto or simply remove it in order to make it work.
Related
so i have this code
<div style="text-align:center; max-width:500px; width:100%; margin:auto"> <script type="text/javascript" src="transition_example.js"></script></div>
this is the transition_example.js:
var show1=new slideshow({
wrapperid: "myslide",
wrapperclass: "sliceClass",
imagearray: [
["1.jpg"],
["2.jpg"]
],
pause: 9000, //pause between content change (millisec)
transduration: 1000 //duration of transition (affects only IE users)
})
i want to set the images to display at 100% width so when the screen resizes the js script resizes too.
Can't find a way to achieve it, i could really use some help.
Thanks in advance!
To make an image responsive to it's container, assuming your container doesn't have a fixed width, just add width: 100% or max-width: 100% to the img.
width: 100% will make the image as wide as the container, and it will scale with it.
.sliceClass img {
width: 100%;
}
<div class="sliceClass">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
max-width: 100% will make the image responsive with the container, but the image width will not expand beyond it's actual width.
.sliceClass img {
max-width: 100%;
}
<div class="sliceClass">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
You can add this css to apply a 100% to the sliceClass generated img
.sliceClass {
width: 100%;
img {
width: 100%;
}
}
I'm trying to build a photo mosaic using flexbox and object-fit: contain by changing the line height (and thus adjusting width keeping the aspect ratio).
This works well in Firefox, however not in Chrome, iExplorer, Edge, where the images shrink in place. While the images are adjusted in size, the spacing is increased.
I made an example in JSFiddle with the following Code where
container is a line of images
image1/2 are the images in a container
img contains the actual picture
HTML
<div id=container class=lContainer>
<div id=image1 class=imageThumb>
<img src="http://lorempixel.com/300/200">
</div>
<div id=image1 class=imageThumb>
<img src="http://lorempixel.com/300/200">
</div>
</div>
CSS
.lContainer {
display: flex;
justify-content: center;
width: auto;
}
.imageThumb {
height: 100%;
padding: 2px;
}
img {
object-fit: contain;
height: 100%;
width: auto;
min-width: auto;
}
JS (resizing the pictures to show the effect)
$(document).ready(function() {
var divID = document.getElementById('\container')
var el = $(divID);
curHeight = 200
goalHeight = 150;
el.height(curHeight).animate({
height: goalHeight
}, 600, function() {
el.css('height', goalHeight);
$(el).css("opacity", 0.99);
console.log("done")
});
});
I noticed that toggling padding on the image in Chrome yields the intended result (e.g. the page is not loaded correctly, if I toggle padding off / on in the inspector, the result changes to the intended one).
Using an online autoprefixer to account for the other browsers does not change a thing.
What am I missing? Thanks for your help!
So I've started playing around with bigvideo.js (which is built on top of video.js) and it works fine for the basic usage of having a fixed background video over the whole screen. I have also managed to show it inside of a div.
My problem though, is that I can't seem to stack other DIVs with other content over or under the bigvideo.js container div, and I can't seem to figure out how to solve this.
My HTML:
<div style="float: left; width: 100%; height: 300px;">
<h1>hi there</h1>
</div>
<div style="float: left; width: 100%; height: 500px;" id="intro-video-container">
</div>
JS firing up bigvideo:
$(function() {
var BV = new $.BigVideo({container: $('#intro-video-container'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
So the video container div ALWAYS gets stuck up to the left top of the body, no matter if I try to force it down with margin-top, or place divs before it, etc.
Any ideas?
Update, here is an illustration of what I kind of what to achieve:
Try to use container div (so called wrapping) in your page where you will place the desired content (as on the plugin's example page):
CSS
.box {
background:#444; background:rgba(0,0,0,.6);
padding:20px;
border-radius:5px;
margin-bottom:20px;
}
.main {
position:relative;
margin:50px 50px 440px 220px;
min-width:300px;
-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.dimmed {
color: #ccc;
}
#big-video-wrap {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
HTML
<div id="big-video-wrap"></div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>Simple Ambient Video Example</h2>
</div>
</div>
JavaScript
$(function() {
var BV = new $.BigVideo({container: $('#big-video-wrap'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
EDIT:
Now, it is more clear what you are trying to achieve, the simplest solution is to include an iframe on place of the div, which points to your full-screen video page.
I.e. create page video.html with all initializations and plug-in includes, then use it as source of your iframe on main page. Your iframe can be styled to match the desired dimensions (for example 100% width and 300px height).
Portrait img contained within a div does not get it's height set correctly... in FF(27.0.1) only. Works with Chrome, and IE8.
I have the following:
html, body {
margin: 0;
border: 0;
padding:0;
width: 100%;
height: 100%;
overflow:hidden;
}
.photo-container {
position: absolute;
right: 0;
top: 0;
width: 79%;
height: 100%;
overflow-y: auto;
}
img#photo {
margin-top: 0.5%;
max-width: 100%;
max-height: 95%;
}
In the html...
<div class="photo-container">
<div id="pic"></div>
</div>
<script type="text/javascript">
function f_pop(theImg) {
document.getElementById('pic').innerHTML = "<img id='photo' src='" + theImg + "' alt='photo'>";
}
http://jsfiddle.net/isherwood/sFZgn
Notes:
The photograph is portrait orientation.
This works with Chrome and IE8, but not in FF 27.0.1
In the img#photo, I changed the height to 50%. Chrome and IE8
sized the photo down. In FF it was truncated (and required the div's scroll bar to move down).
I initially had this (without the photo-container) as a page in a frameset, that is the hierarchy was body, div id=pic. It worked in that design with FF.
I converted the frameset to a single page with two column (divs), the right side being the photo-container, and now it does not work in FF.
Your help is greatly appreciated.
Thanks.
You need to set a height on #pic:
#pic {
height: 100%;
}
http://jsfiddle.net/isherwood/sFZgn/2/
I solved this by removing the div around the img. (This is what I had in my frameset version, and I'm not sure why I added it to this 2 column div version).
Also changed the photo-container from a class to a id.
So the only change in the CSS is .photo-container becomes #photo-container.
The html
<div id="photo-container">
<img id="photo" src="default.gif" alt="photo">
<div id="blurb"></div>
<div id="contributor"></div>
</div>
The js
document.getElementById('photo').src = pic;
document.getElementById('blurb').innerHTML = blurb;
document.getElementById('contributor').innerHTML = contributor;
Currently I have four images side by side. When the window is resized or viewed on a smaller device it does a line jump (three images and the fourth one beneath it). However what I want is for all four images to just shrink relative to the window size. To make it clear, I've included some images and my code. Here's the jsfiddle as well: http://jsfiddle.net/hxeJb/
^ That is what I currently have.
^ That is what I want to achieve.
HTML:
<div id="headerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>
CSS:
#headerline {
width: 100%;
overflow: hidden;
margin: -10px auto 20px auto;
}
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}
http://jsfiddle.net/hxeJb/2/
#menu img {
width: 20%;
}
See if this help you, just don't provide a fixed width, let image width relative to its parent width
Observing your CSS part in jsFiddle, I think assigning width in percentage rather than fixed pixels will resolve your problem.
You can try this instead of current CSS.
#menu img {
width: 31.33%;
}
Hope this might help you.
The other answers are probably all correct but you may want to add a max-width: 150px; so that hte image does not expand too big and lose quality.
#menu img {
width: 30%;
max-width: 150px;
}
Fiddle: http://jsfiddle.net/hxeJb/4/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
#menu img {
width: 25%; //give the width as per the requirement
}
Hope this will solve your problem :)