Develop Reference

Image within Div

I am creating a slider using swiper/angular of categories.
I have category image and category name. How can I get category image and name placed vertically inside a circle?
<div class="slidesContainer" #header>
<swiper #swiperRef mode="ios" [config]="config" >
<ng-template swiperSlide *ngFor="let c of parentCategory.categories let i=index;">
<div id='category_container'>
<div id='category'>
<ion-img [ngStyle]="{'backgroundColor':currentCategory.categoryId==c.categoryId?'blanchedalmond':'#f9f9f9'}" src="{{originalImagePath}}/{{getImageName(c.imageName)}}"></ion-img>
<h2 style="font-size:11px;text-align:center;font-weight: bold;">{{c.categoryName}}</h2>
</div>
</div></ng-template>
</swiper>
</div>
#category_container {
height: 75px;
width: 75px;
background: white;
}
#category {
width: 100%;
//background: #000;
color: #fff;
text-align: center;
ion-img{
border-radius: 50%;
}
}
This is how it is rendered. Some of the images are outside of the div. How to make it perfect for any image size?

The best method would be using max-height and max-with properties and setting them to image with following logic:
img {
max-height: 32.5px // half of circle diameter
max-width: 32.5px // half of circle diameter
}
If you want some more spacing just decrease the number.
Also do not set that border radius on image itself set it on it's container.
Made as elaboration on #Yarin_007 comment

make an element the same height as its child with css

I have this code and the child's height is changing but the parent's height remains the same. I want a CSS code to make the parent's height the same as the child
<div class = "parent">
<div class="child">
</div>
</div

Note: using your HTML
if you add the CSS
<style>
.parent, .child {
width: 120px; height: 100px;
}
</style>
<div class = "parent">
<div class="child">
</div>
</div
both child and parent would have the same width and height of: 120, by 100. Change these values to suite what you need.
if you add this additional CSS lines:
.parent { border: 1px solid red; }
.child { border: 1px solid blue }
this will draw your border - in different colours, so you can see easily what is happening - you can remove this after

JavaScript: setting main div tag height to zero which makes all the sub divs have a height of zero

I just want to use some css to make the height of a div 0 which also makes all the heights of the sub divs 0. I then want to call a javascript function which when clicked it makes the height of the main div 100%.
Here is the code that I have written:
HTML
<div class="menuTitle" id="ButtonsTopStyle" onclick="ButtonsTop">CONNECTING RODS</div>
<div class="buttonsTop" >
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
</div>
<div class="menuTitle" id="ButtonsBottomStyle" onclick="ButtonsBottom">CRANKSHAFTS</div>
<div class="buttonsBottom">
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
</div>
CSS
.smallButtons {
box-sizing: border-box;
margin-left: 10px;
height: 50px;
width: 50px;
margin-top: 15px;
background-color: white;
}
.menuTitle {
color: white;
font-family: "Arial";
text-align: center;
font-size: 30px;
padding-bottom: 30px;
padding-top: 30px;
}
.buttonsTop {
margin-left: 23px;
}
.buttonsBottom {
height: 0;
margin-left: 23px;
}
The css I have written doesnt make the height of the .buttonBottom zero they are still being displayed on the page. I don't want them to be displayed on the page
JAVASCRIPT
function ButtonsBottom() {
document.getElementById("ButtonsTopStyle").style.height = "0";
document.getElementById("ButtonsBottomStyle").style.height = "100%";
}
function ButtonsTop() {
document.getElementById("ButtonsBottomStyle").style.height = "0";
document.getElementById("ButtonsTopStyle").style.height = "100%";
}
As you can see I want the buttonsBottom to not be visible on the page when it loads but when you click on the onclick="ButtonBottom" div it makes the height 100% and makes the onclick="ButtonsTop" div have a height of 0

Add an
overflow:hidden;
to your .buttonsBottom div
Your div is expanding in height to accommodate your content.
What I'd suggest is adding an additional class of
.hidden {
height: 0;
overflow: hidden;
}
to your CSS and then modifying your JavaScript to add/remove this class as needed.
The other option would be to use display: none; and display: block; instead of height. Which would be my preferred method as long as you aren't aiming for a transition effect on height when clicked.

try this :
function ButtonsBottom() {
document.getElementById("ButtonsTopStyle").style.height = "0";
document.getElementById("ButtonsBottomStyle").style.height = "0%";
}
function ButtonsTop() {
document.getElementById("ButtonsBottomStyle").style.height = "0";
document.getElementById("ButtonsTopStyle").style.height = "0%";
}

jQuery Panzoom with contain: 'invert' inside a container with a fixed width

I'm trying to use jQuery.panzoom.js. All I have is a container with a fixed width (which might be smaller than the svg inside it). The problem is that if the svg is bigger than than the width of the container you cannot see the whole of it (even when you try to "pan it").
The html:
<div class="container">
<div id="parent">
<div class="panzoom">
<img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" />
</div>
</div>
</div>
CSS:
.container {
width: 600px;
margin: 0 auto;
border: 1px solid red;
}
#parent {
border: 1px solid black;
}
.panzoom { width: 100%; height: 100%; }
And the javascript (as provided in the demos of this plugin):
(function() {
var $section = $('#parent');
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
startTransform: 'scale(1.1)',
increment: 0.1,
minScale: 1,
contain: 'invert'
}).panzoom('zoom');
})();
Here's a working demo, reproducing the problem: http://codepen.io/FakeHeal/pen/WreLyZ

You have to set the Dimension of the .panzoom class the same size as your image. So i expect your image is 600px in with and has a height of 900px use this css part
CSS-File
.panzoom {
width: 600px;
height: 900px;
}

Change Element Content But Not The Size

I have a page that displays images at a set width. The height is variable so the image keeps it's aspect ratio. On mouse over, the image changes, but so does the height. How can I keep the height and width the same and just have the new image use a max-height / max-width of the last image so the container is not resized.
See Here - http://jsfiddle.net/z3sxc/11/
<style>
li {
width: 190px;
border: 1px solid black;
list-style: none;
}
li img{
width: 100%;
}
</style>
<body>
<ul>
<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">
</li>
<li onmouseover="clip_2.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_2.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_2">
</li>
</ul>​
</body>

You can try this - DEMO
$("li")
.on("mouseover", function() {
var h = $(this).height();
$(this).find("img").prop("src", "http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg");
$(this).height( h );
})
.on("mouseout", function() {
$(this).find("img").prop("src", "http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg");
});

No JavaScript/jQuery is needed to achieve this effect.
Simply define the background image of a block element (e.g. <div />, <span style="display: inline-block" />, etc.) in a css class, then change the background image on :hover.
See here: http://jsfiddle.net/adamb/z3sxc/15/
HTML:
<div class="picture" />
CSS:
.picture {
background: url(http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg) no-repeat;
background-size: 190px;
width: 190px;
height: 190px;
border: 1px solid black;
}
.picture:hover {
background: url(http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg) no-repeat;
background-size: 190px;
}

You could add a Javascript function to change the CSS on the element:
function changeImage() {
clip_1.style.maxWidth = clip_1.width + 'px';
clip_1.style.maxHeight = clip_1.height + 'px';
clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg';
}​
<li onmouseover="changeImage()" ... />
(Live here)

Here's something that might get you started.
The first adjustment I made was to wrap your image in a <div> with a generic CSS class name:
<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<div class="clip">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">
<div>
</li>​
And then you can give that class some style which will help with the sizing:
.clip {
overflow: hidden;
}
And then with a little jQuery on top:
$(function() {
$('.clip img').load(function() {
$(this).parent('.clip').css({
width: $(this).width(),
height: $(this).height()
});
$(this).unbind('load'); // only do this once
});
});​
​DEMO