.imageButton {
width: 14px;
height: 50px;
}
.divClass{
width:100px;
height: 30px;
}
<div class="divClass"><img class="imageButton" /></div>
here the height of the .divClass is dynamic.Now my problem is while displaying in need to crop this image according to the div's height. for example:- if div's height is 30 then img needs to be cropped top-((img's height-div's height)/2) and bottom-((img's height-div's height)/2)
How to achieve this?
If it's possible in your case setting image as div's background instead of placing it in HTML would have the desired effect
.divClass {
background: transparent url('imageButton.png') 50% 50% no-repeat;
}
apply 100% height and width to image
.imageButton {
width: 100%;
height: 100%;
}
you can adjust height and width according to your need. you can specify it 50% if you want it to be half of parents height or width
hope it'll help
Thank you
Related
sorry for my English...
look at below code
img {
max-width: 100%;
}
#avatar-img {
border-radius: 50%;
display: block;
}
This is output. It is not completely rounded
Now my question is how to round this image? what's wrong with this code?
You use for border-radius a percentage value, but the height and the widht of your image are not the same. It is logical that a percentage of two values which are not the same give you different results, therefore it isn't round.
If you want to make it round use an image where width and height are the same.
You can set width and height to the same value
Just set the same height, width and 50% border-radius to image and it will perfectly round your image. for example see below example.
img {
border-radius: 50%;
width: 240px;
height: 240px;
max-width: 100%;
}
#avatar-img {
display: block;
}
<div id="avatar-img">
<img src="https://placeimg.com/240/240/any" />
</div>
In this example my image have 240 width and height so you just set your image width and height.
width:240px;
height:240px;
and change the image src and see the result.
I have 2 div's named first and second and I have set the width and height of them as 100%
.first{
width : 100%;
height : 100%;
}
.second{
width : 100%;
height : 100%;
}
now I would like to add an image in each div. These images should fill in the entire div.
<img src="someimage.png" width="100%" height="100%"/>
My problem is the image should not be stretched it should be filled the entire screen. I have used img img-responsive classes to achieve this. The image is now getting filled without stretching but when resized it is getting resized uniformly and the height of it is also getting decreased hence the image's height is now not getting filled 100%. Is there any way to achieve width and height of an image to cover the entire screen without stretching and decreasing the height?
Check this out, and you should use width: 100% beside min-height: 100% but i recommend you to use background-image with background-size: cover
.first{
width : 100%;
height : 100%;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.first img {
width: 100%;
min-height: 100%;
}
<div class="first">
<img alt="" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97500&w=500&h=500"/>
</div>
jsFiddle
I use imgLiquid this is a jQuery Plugin to resize images to fit in a container.
https://github.com/karacas/imgLiquid
It's super easy to use and light weight.
div {
display:block;
width:320px;
background:url('images/cnon.jpg');
background:contain;
}
Is there any way to auto-adjust <div> height depending on background height?
I can't understand what do you actually want, but if you want to make div fully aligned to background:
div {
display:block;
width: auto;
height: auto;
background:url('images/cnon.jpg');
background:contain;
margin: -10px; //Optional
}
Sorry if i didn't understood your question well.
if you could use jQuery you can handle it simply by checking on the img height then apply this height to the div itself
You can adjust the height of div, adjusting the padding top of the div, just need to set the css automatically.
.div_image{
background:url('images/cnon.jpg');
height: 0;
width: 100%;
background-size: contain;
padding-top: 20%;
}
The padding-top is calculated by a formule.
(image-height[px] / image-width[px]) * container-width[%]
Example: (274px / 1370px) * 100% = 20%
With this result the padding-top need to be 20%.
This is my HTML:
<div>
<img src='image.png'>
</div>
and this is my CSS:
img {
width: 100%;
color: orange;
background-color: orange;
}
div {
width: 200px;
height: 500px;
border: 1px solid black;
}
fiddle: http://jsfiddle.net/ro764g6o/
The image becomes 100% width of what the div is. Is there a way I can say "Use the original width of the image if the '100%' (the width of the container) is greater than the original width of the image"?
For example, assume the div's width is 50px and the images original width is 60px (the width of the div is dynamically generated based on screen size. The image is determined by the end user). In this case, the width of the image should be 100%.
However, if the div's width is 70px and the images original width is 60px, then the width should remain the same.
Is there anyway to achieve this with HMTL and CSS? If no, is there anyway to achieve this using Django / Python?
Yes. It's called max-width:
img {
max-width: 100%;
/* ... */
}
http://jsfiddle.net/ro764g6o/1/ - resize pane to see
I have certain images that are smaller in width which i stretch the width to fit the container, however would like the hieght to scale up as well, thanks in advance, Phil
In your css:
img {
width: 100%;
height: auto !important;
}
CSS can naturally handle this. The image will automatically take up 100% of the width of its container, and the height will scale to match.
There is no need to specify the height.
Take a look to my example, here is my jsfiddle
http://jsfiddle.net/d575tr49/
Here is the HTML
<div class="ele">
<img src="http://viralstash.net/wp-content/uploads/2014/03/521013543_1385596410.jpg" border="0" />
</div>
Here is the CSS
.ele {
outline: red solid 1px;
width: 250px;
}
.ele img {
width: 100%;
display: block;
}
If you control the width on the Parent element, just the with, you will not need to worry about the width and height values of the image.
The image it self will set its width using the parents size, and by default the height value will be proportional to the width, so no need to specify the height value at all, not even in the parent.