do you know the way to limit image in the div ? I'm creating a website like a http://bezuzyteczna.pl/ On this site if your image has mor than 200px height it is limitig to 100px and on the bottom is showig "Show More" Have anyone any suggestion ?
You can set a max-height and overflow to hidden on the wrapping container of the image.
<div class="image"><img src="[path/to/images]" alt="" /></div>
.image {
max-height:100px;
overflow:hidden;
display:inline-block;
}
.image > img {
display: block;
}
http://jsfiddle.net/qx7Ps/1/
Related
I have a four column row(col-md-3) row. Each column has a thumbnail of width-220px and height-360px.How can I fill/cover the thumbnail div with images of different resolution(such as: 1920X1080px or 2480 X 3508 px) ?
I have tried this:
<div class="thumbnail">
<img src="images/highres.jpg" alt="Nosmoking image">
</div><!----End of thumbnail-->
</div>
</div>
CSS:
img{
object-fit: cover;
}
.thumbnail{
height: 360px;
width: 220px;
overflow:hidden;
}
I have used an image of 1920X1080px (wide) and it's just filling the half of the thumbnail.what i want is to keep the aspect ratio and cover the thumbnail. what is the simplest solution?
If I understand you correctly, there are some solutions, you can add different classes to each .thumbnail and add background image for each .thumbnail using CSS, but for now and for your current code, you can add this CSS and can resolve your problem:
.thumbnail > img{
width:100%;
height:100%;
}
EDIT:
If you want to keep the aspect ratio, I suggest adding suitable classes to your .thumbnail HTML element, then add the image using CSS background.
imagine this:
HTML:
<div class="thumbnail thumbnail-1"></div>
<div class="thumbnail thumbnail-3"></div>
<div class="thumbnail thumbnail-4"></div>
CSS:
.thumbnail {
background-size:cover;
backgrond-repeat:no-repeat;
}
.thumbnail-1{
background-image:url("image1.jpg")
}
.thumbnail-2{
background-image:url("image2.jpg")
}
.thumbnail-3{
background-image:url("image3.jpg")
}
I have the following code
.clsName {
width: 24px;
height: 24px;
// background-color: #0057bf;
background-image: url('svg/ico-plus-add.svg');
color: transparent;
}
Now I want to display this in a clickable link, I use the following for that
<a (click)="method()" href="#">
<img class="clsName" />
</a>
The problem is that I get a border around the image, how do I get rid of this, and as a side note what is the best way to show an .svg image that is clickable?
In your CSS class add border: 0;
I have an image area in which a random image will be visible. How do I make the image fit to its width or height within the image area while maintaining the image proportions?
This is what I tried, but it distorts the image:
<div style="float:right;"> <!-- img area -->
<img style="max-width:100%; max-height:100%;" src="rand/greetings.png"/>
</div>
The following will keep an image horizontally aligned within a div (use the full page link and change the browser size to see the image change size)
#wrap {
border:1px solid #000000;
position: relative;
width: 50%;
height: 400px;
overflow:hidden;
}
#wrap > img {
width: 100%;
position:absolute;
top:50%;
transform: translateY(-50%);
}
<div id="wrap">
<img src="http://lorempixel.com/800/800/city/1/" alt="" />
</div>
Just set width or height to 100% but not both, this will keep the proportions of the image and allow it to scale.
<div style="float:right;"> <!-- img area -->
<img style="width:100%;" src="rand/greetings.png"/>
</div>
EDIT:
To prevent an image spilling out of your area vertically try setting a max-height in pixels on the image and image area:
<div style="float:right; max-height:100px;"> <!-- img area -->
<img style="width:100%; max-height:90px;" src="rand/greetings.png"/>
</div>
if you want to keep it simple, you can set this image as background-image and use background-size:contain;
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.