Dynamic Logo Re-sizing using HTML or CSS - javascript

Hi trying to figure out how to dynamically resize a logo, when i use percentages it uses a percentage of the whole page not the div that contains it.
<img src="Images/logo.png" name="logo" id="logo">
<div id="top_border"></div>
<img id="background" src="Images/BG_1.jpg">
Any help will be greatly appreciated. thank you.

In your CSS File add :
img {
width: 20%;
max-width: 300px;
height: auto;
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:300px;">
<img src="image/example.jpg" />
</div>

Related

How to arrange responsive but absolute positioning of dependant elements of the image?

)
Seems i want to invent a wheel, sorry if so.
I have an image of a device and want to make it animated(not the proper word probably).
I mean i want to make buttons clickable as a menu parts. Imagine its a remote for TV or vynil player (if to click play button vynil start spinning), but i can't draw it - only the hq photo - top view. Some of the elements will rotate and spin on mouseevents. Ok, sorry for a lot of extra info, but maybe i am totally wrong in efforts.
I attach a basic fiddle.
<div id="wrapper" class="wrapper">
<img id="img1" src="https://i.ibb.co/FxF2Qhf/main.png" alt="main">
<div id="wrapper2" class="wrapper2">
<img id="img2" src="https://i.ibb.co/Hqbrv67/circle.png" alt="circle">
</div>
<div id="wrapper3" class="wrapper3">
<img id="img3" src="https://i.ibb.co/0FJj7Ys/rect.png" alt="rect">
</div>
</div>
In other words i want to cut elements in photoshop and then make a responsive "puzzle" in html. A circle and rect should scale with main backgraound and stay always at their native places and should be functional elements with clicking events, rotating, etc.
I suppose that widths and heights, positioning should be calculated via js? But circles...
Sorry again if it is too basic and simple.
Looking forward to pointing me the right way)
I tried canvas (low experience), map/areas don't suit cause of animations and transitions need
You should set relative image size if you want them to scale proportionally with container. Set widths in relative percentage of parent container.
.wrapper {
position: relative;
width: 100%;
max-width: max-content;
}
#img1 {
width: 100%;
}
#img2 {
position: absolute;
top: 28%;
left: 35%;
width: 28%;
}
#img3 {
position: absolute;
bottom: 6%;
left: 5%;
width: 32%;
}
<div id="wrapper" class="wrapper">
<img id="img1" src="https://i.ibb.co/FxF2Qhf/main.png" alt="main">
<img id="img2" src="https://i.ibb.co/Hqbrv67/circle.png" alt="circle">
<img id="img3" src="https://i.ibb.co/0FJj7Ys/rect.png" alt="rect">
</div>

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>

whitespace: nowrap for photo has issue when resize

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.

Fluid Image within a fixed Div not re-sizing

Thanks in advance for any and all help and responses. I have a fixed div which floats at the bottom of the screen and is used as ad space for a mobile version of a website. The live version can be found here: http://www.catholiccourier.com/?mobileFormat=true . For some reason, when I try to re-size the browser window, the image inside the fixed div does not seem to shrink properly. If I resize the window abruptly the image shrinks, but it wont resize the same way as the header logo for example. Also it does not seem to stay centered. I have tried margin:0 auto; and text-align:center on the outer div, but it does not seem to work. There are some script tags inside the div as well as noscript, and I am wondering if they may be the cause of the issue.
You can see all of the code in the live website, but here is a copy of some of the code.
<div id="adSpace" align="center">
<script language="javascript" src="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Get&IFR=False&Browser=NETSCAPE4&PageID=9311&SiteID=2&Random=1375796513537"></script>
<a href="http://catholiccourier.com/banman/a.aspx?Task=Click&ZoneID=43&CampaignID=265&AdvertiserID=79&BannerID=242&SiteID=2&RandomNumber=655331242&Keywords=" target="_Blank" class="ui-link">
<img src="http://catholiccourier.com/banman/ads/3/HOLY-SEP-REWORK_fix.gif" width="728" height="90" alt="Holy Sepulchre Cemetery 585-458-4110" align="Center" border="0">
</a>
<br>
<noscript>
<a href="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&amp;Task=Click&amp;Mode=HTML&amp;SiteID=2&amp;PageID=9311" target="_blank"> <img src="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&amp;Task=Get&amp;Mode=HTML&amp;SiteID=2&amp;PageID=9311" width="728" height="90" border="0" alt=""></a>
</noscript>
</div>
Please help and thank you.
you can use position:absolute for your div
.ui-mobile #adSpace {
position: absolute;
bottom: 0;
background-color: #e6e6e6;
width: 100%;
height: auto;
max-height: 90px;
z-index: 9999;
text-align: center;
}

Categories

Resources