I have a div with a width of ~ 200px and a height of 145px, inside that div I place an Image which has a height of 145px but a width of 210px, how can I cut 10px from the right side of the Image so that the Image fits into the Content of the div?
Use overflow:hidden for the div.The part of image portion ouside the div will be not be visible
<div style="width:200px;height:145px;overflow:hidden;border: 1px solid green;">
<img src="http://via.placeholder.com/210x145" style="width:210px; height:145px;border: 1px solid red;">
</div>
.container {
width: 200px;
height: 145px;
overflow: hidden;
}
<div class="container">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzU5ODI0NDE4MF5BMl5BanBnXkFtZTYwMTE2MTI2._V1_SY154_SX210_AL_.jpg">
</div>
For Fit Image:
img {
width:100%;
//dont need height
}
For Cut Image
div {
overflow:hidden;
}
.cut-text {
text-overflow: ellipsis;
overflow: hidden;
width:25px;
height: 1.2em;
white-space: nowrap;
}
<h2>text-overflow: ellipsis:</h2>
<div class="cut-text">Hello world!</div>
Related
I have an image inside a div container that's inside another container like so:
<div className='container'>
<div className='imageContainer'>
<img src='whatever' />
</div>
</div>
I want the imageContainer to stay within the container, but keep the image inside that container to the same size.
I added css so now when the screen's width decreases, the image slides out of frame.
.imageContainer {
border: 1px solid black;
width: 100%;
overflow: hidden;
}
Before I added this css the image would shrink in size to fit inside the imageContainer which is fit inside the outer container.
Is it possible to have the image stay in place inside the container and not shrink in size or width, rather just be cut off on one side?
For example if I would decrease the screen width the image's lefthand side would stay in place while it's righthand side is continuously cropped.
I couldn't find anything to help with my particular css issue, so if anybody knows a solution that would be greatly appreciated.
.imageContainer {
border: 1px solid black;
width: 100%;
overflow: hidden;
}
<div class='container'>
<div class='imageContainer'>
<img src='https://via.placeholder.com/2560x1440' />
</div>
</div>
Check if you added your overflow: hidden in correct place
.imageContainer {
border: 2px solid purple;
padding: .3rem;
width: 100%;
}
.container {
max-width: 600px;
border: 2px solid red;
padding: .3rem;
}
.container--crop {
overflow: hidden; /* add overflow: hidden to upper parent container */
}
<p>Not cropped</p>
<div class='container'>
<div class='imageContainer'>
<img src='https://dummyimage.com/700x400/000/fff' />
</div>
</div>
<p>Cropped container</p>
<div class='container container--crop'>
<div class='imageContainer'>
<img src='https://dummyimage.com/700x400/000/fff' />
</div>
</div>
Add height to your css:
.imageContainer
{
border: 2px solid black;
width: 100%;
height:100px;
overflow: hidden;
}
Check the link: jsfiddle.net/majidliaquat/zfqjxd35/8
I want to build a container that contains an image on the left side and to its right there is supposed to some information about it, like a headline and some description.
I want the container to be able to expand between some minimum and maximum width dynamically. The images can also have different widths between two boundaries and if the container already has a maximum width, but the headline is longer, the headline should be shortened and there should appear some dots.
I found a way to shorten the headline, like here: http://jsfiddle.net/h0452569/
, but therefore I need to limit the width of the container next to the image. I tried this with the code below, but I can't find a way with CSS to dynamically limit the div width to not extend the container's div!
I would be very happy if anyone had an idea out there!
jsfiddle
HTML:
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
<div style="clear:both"></div>
CSS:
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
position: absolute;
border: 1px solid #666666;
white-space:nowrap;
}
.image {
float: left;
display: inline-block;
vertical-align: top;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.meta-container {
overflow: hidden;
text-overflow:ellipsis;
display: inline-block;
}
.headline {
width: 100%;
white-space:nowrap;
}
.description {
font-size:.8em;
}
In the example you refer to, those styles are added to the text element itself. In your design, the styles are given to the parent element.
Solution: add the styles to .headline instead of .meta-container.
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
border: 1px solid #666666;
overflow: hidden;
}
.image {
float: left;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.description {
font-size: .8em;
}
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
</div>
<p>Next element</p>
In order to break the word use "word-wrap: break-word" in your .headline class, you also need to set a width (in px). For example:
.headline{
width:100px;
word-wrap: break-word;
}
I have a div as the main wrapper, then an image-wrapper div as the image wrapper, and an .
What I want is that under certain lower resolutions (1300px for example), the image-wrapper div to stay vertically aligned. Now, when you see it, it is not vertically aligned. The top padding keeps the image-wrapper div stuck to the top, while on the bottom there is a large gap.
Here is the site:
http://namdarshirazian.com
It happens in the homepage. The central image.
Here is the ID of the main div:
#homepage-image
Here is the CSS of the three
#homepage-image
{
padding: 20px 20%;
border: 2px #CCC solid;
background-color: white;
text-align: center;
overflow: hidden;
height: 540px;
}
#homepage-image div
{
height: 495px !important;
padding: 0px !important;
}
#homepage-image div img
{
width: 100%
}
And here is the markup of the element:
<div class="image" id="homepage-image">
<div style="height: 520px; overflow: hidden;">
<img src="photo/homepage/image.jpg" alt="" title="">
</div>
</div>
The CSS are located in the style.css line 187.
I appreciate if you do a live edit. Thanks in advance
<div class="image" id="homepage-image">
<div style="height: 520px; overflow: hidden; white-space: nowrap;">
<span class="keepImgVerCenter"></span>
<img src="photo/homepage/image.jpg" alt="" title="">
</div>
</div>
.keepImgVerCenter{
display: inline-block;
height: 100%;
vertical-align: middle;
}
Hope this helps.
I want to have one <div> with id that has horizontal scroll, but the problem is it has to be responsive, not with fixed width.
html, body {margin: 0; padding: 0;}
#myWorkContent{
width:530px;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#myWorkContent a {
display: inline-block;
vertical-align: middle;
}
#myWorkContent img {border: 0;}
<div id="myWorkContent">
<img src="http://placekitten.com/200/200/" height="190">
<img src="http://placekitten.com/120/120/"/>
<img src="http://placekitten.com/90/90/" height="90" width="90">
<img src="http://placekitten.com/50/50/" height="190">
<img src="http://placekitten.com/100/100/">
<img src="http://placekitten.com/200/200/" height="190">
</div><!-- end myWorkContent -->
Thanks to http://jsfiddle.net/clairesuzy/FPBWr/
The problem is with that 530px. I would like to use 100% instead. But then I got page scroll and scroll of the DIV goes right, can not get it, any idea?
Here is article in Serbian about solution
http://www.blog.play2web.com/index.php?id=18
Just set your width to auto:
#myWorkContent{
width: auto;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
This way your div can be as wide as possible, so you can add as many kitty images as possible ;3
Your div's width will expand based on the child elements it contains.
jsFiddle
Below worked for me.
Height & width are taken to show that, if you 2 such children, it will scroll horizontally, since height of child is greater than height of parent scroll vertically.
Parent CSS:
.divParentClass {
width: 200px;
height: 100px;
overflow: scroll;
white-space: nowrap;
}
Children CSS:
.divChildClass {
width: 110px;
height: 200px;
display: inline-block;
}
To scroll horizontally only:
overflow-x: scroll;
overflow-y: hidden;
To scroll vertically only:
overflow-x: hidden;
overflow-y: scroll;
Just make sure you add box-sizing:border-box; to your #myWorkContent.
http://jsfiddle.net/FPBWr/160/
use max-width instead of width
max-width:530px;
demo:http://jsfiddle.net/FPBWr/161/
I figured it this way:
* { padding: 0; margin: 0 }
body { height: 100%; white-space: nowrap }
html { height: 100% }
.red { background: red }
.blue { background: blue }
.yellow { background: yellow }
.header { width: 100%; height: 10%; position: fixed }
.wrapper { width: 1000%; height: 100%; background: green }
.page { width: 10%; height: 100%; float: left }
<div class="header red"></div>
<div class="wrapper">
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
</div>
I have the wrapper at 1000% and ten pages at 10% each. I set mine up to still have "pages" with each being 100% of the window (color coded). You can do eight pages with an 800% wrapper. I guess you can leave out the colors and have on continues page. I also set up a fixed header, but that's not necessary. Hope this helps.
Hi I have been trying to create a simple image gallery, but am having issues getting the overflow-x scroll bar to appear when my images cumulative width reach a value greater than their parent div.
Check out this fiddle demonstrating the problem.
I just want to be able to resize the window and have the overflow-x scroll bar to appear when there are to many thumbnails to display horizontally within the available width of their parent.
The cleanest, and easiest way to achieve this is to add white-space: nowrap; to your container div and the images within it:
CSS
.container {
height: 140px;
width: 100%;
border: solid 1px red;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
img {
white-space: nowrap;
}
HTML
<div class="container">
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
</div>
Should dynamically adjust as required, enjoy!
Here is another pure CSS solution:
I placed the images in another div
<div style='height:100%; display: inline; white-space: nowrap;'>
check jsfiddle.
PS: I copied the images a few times just to show how it looks with more images. The inline css can be moved to a class or ID but that's up to you.
EDIT: Wrong link. Sorry, i replaced it :)
This fiddle should do the trick... There is a fixed width container for the thumbnail images which has a horizontal scrollbar when the contained images overflow to the right.
HTML
<div class="gallery-container">
<div class="gallery">
<div class="thumbnails">
<img src="http://www.drawingcoach.com/image-files/cartoon_trees_st5.jpg"/>
<img src="http://www.aperfectworld.org/clipart/nature/cartoon_tree.png"/>
<img src="http://84d1f3.medialib.glogster.com/media/23/23af5b409b4e973a9353048b062d73a33677c1f64c4b912a0aa6930081894f48/tree-cartoon-jpg.jpg"/>
<img src="http://www.drawingcoach.com/image-files/cartoon_trees_st5.jpg"/>
<img src="http://www.aperfectworld.org/clipart/nature/cartoon_tree.png"/>
<img src="http://84d1f3.medialib.glogster.com/media/23/23af5b409b4e973a9353048b062d73a33677c1f64c4b912a0aa6930081894f48/tree-cartoon-jpg.jpg"/>
</div>
</div>
<img class="fullpic" src="" />
</div>
CSS
.gallery
{
border: 1px solid black;
height: 120px;
width: 200px;
overflow: hidden;
overflow-x: scroll;
}
.thumbnails
{
/* Arbitrarily large number */
width: 10000px;
}
.gallery-container img /* larger size image */
{
width: 200px;
height: auto;
}
.thumbnails img
{
width: auto;
height: 100px;
display: block;
float: left;
border: 1px solid #ddd;
margin: 1px;
}
(Optional) JQuery
$('.thumbnails img').click(function() {
$(this).parent().parent().find('.selected').attr('src', $(this).attr('src'));
});