I have this code in CSS:
<div class="col-lg-6" style="">
<img src="images/team1.jpg" alt="portfolio img" style="margin-top: 15%; max-height: 270px; width:100%"/>
</div>
I need to use auto crop the image instead of compressing the image and become pixelated,
Ive tried max-height still doesnt work ? any idea for this ?
Style your div with width, height and overflow:hidden
div {
width: 300px;
height: 300px;
overflow: hidden;
}
<div>
<img src="http://lorempixel.com/640/650/cats" alt="portfolio img />
</div>
<div class="col-lg-6" style="max-height: 500px; overflow:hidden;">
<img src="images/team1.jpg" alt="portfolio img" style="margin-top: 15%; width:100%"/>
</div>
Related
There are 3 images on my homepage that I want to make responsive. They are not scaling. I have removed any reference to height or width size in the html. I tried to use the CSS rule max-width that targets the image as a percentage relative width value, but can't get it to work.
My html looks like this:
<div class ="wrapper2">
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/kidsspecialevents.jpg" /></div>
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/teenspecialevents.jpg" /></div>
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/adultspecialevents.jpg" /></div>
</div>
The css (that doesn't work) looks like this:
.wrapper img {max-width:100%;}
Any help with this would be appreciated. I've been working on and off with it for months! Thank you
Like Rob said, the .wrapper img {max-width:100%;} only tells the browser you don't want the image to be wider the 100% of the browser window's width.
Check out this code pen with your supplied HTML that shows want you'd like: Code Pen
The width is now set to 50% and the height is set to auto. The images will now take up 50% of the browser window's width and adjust their height to match the original aspect ratio.
Here's just the CSS:
.wrapper2 img {
height: auto;
width: 50%;
}
i made this code if you like.
.wrapper2 img {
height: auto;
width: 100%;
}
.wrapper2 div { float:left; width:33.33%; positive:realtive;}
<div class ="wrapper2">
<div>
<a href="https://www.whitehallpubliclibrary.org/kids-parent/kids/special-events-for-kids/">
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/kidsspecialevents.jpg">
</a>
</div>
<div>
<a href="https://www.whitehallpubliclibrary.org/teens-parent/teens/special-events-for-teens/">
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/teenspecialevents.jpg">
</a>
</div>
<div>
<a href="https://www.whitehallpubliclibrary.org/adults-parent/adults/special-events-for-adults/">
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/adultspecialevents.jpg">
</a>
</div>
</div>
Thank you
Please try this -
<div class ="wrapper2">
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/kidsspecialevents.jpg" />
</div>
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/teenspecialevents.jpg" />
</div>
<div>
<img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/adultspecialevents.jpg" />
</div>
</div>
.wrapper2 {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.wrapper2 div {
width: calc(100%/3 - 2%);
margin: 0 1%;
}
.wrapper2 div a, .wrapper2 div img {
width: 100%;
}
I have no idea why this is such a struggle. I want to place an image inside a container. That image should be responsive, meaning when the column gets smaller in width, the image should also get smaller. It does that now, but it maintains the height, meaning it will look stretched.
https://codepen.io/anon/pen/vmZKyM
<div class="container-fluid">
<div class="col-md-8 offset-md-2">
<div class="row">
<div class="col-md-4 offset-md-2">
<div class="row">
<p>Left column</p>
<img src="http://placehold.it/600x400" />
</div>
</div>
<div class="col-md-5 offset-md-1">
<div class="row">
<p>Right column</p>
<img src="http://placehold.it/700x400" />
</div>
</div>
</div>
</div>
</div>
I do not know the aspect ratio of the image (in this case I do), so I cannot achieve this with the padding-bottom trick (normally used for images).
How can I achieve this?
change max-width: 100%; to width: 100%; also change height: auto; to height: 100%;
If the container should have a fixed height, then give it an ID (or a class) and change the .img-responsive restrictions the other way around eg
.container {
height: 600px;
}
/*And then change */
.container .img-responsive {
display: block;
height: auto;
max-width: 100%;
}
/*To */
.container .img-responsive {
display: block;
width: auto;
max-height: 100%;
}
Not sure how it will work with a mix of orientations but if they are floated it shouldnt really matter
I have an element container, which must remain static. Inside it lies fix, which I need to be fixed when container overflows and I scroll in it.
Example:
<div id="container" style="width: 850px; height: 200px; position: static;">
<div id="fix"></div>
<div id="otherStuff" style="width: 2000px;"></div>
</div>
Can I do this with CSS?
You can put the content you want to overflow in an element with overflow-x: scroll, and the #fix element will stay where it is.
.overflow {
overflow-x: scroll;
}
<div id="container" style="width: 850px; height: 200px; position: static;">
<div id="fix">fix</div>
<div class="overflow">
<div id="otherStuff" style="width: 2000px;">otherstuff</div>
</div>
</div>
I have the following code:
img {
display: block;
margin: 0 auto;
}
<h2>Center an Image</h2>
<p>To center an image, use margin: auto; and make it into a block element:</p>
<img src="paris.jpg" alt="Paris" style="width:40%">
<img src="paris.jpg" alt="Paris" style="width:40%">
<img src="paris.jpg" alt="Paris" style="width:40%">
But I have this problem -
If i do as you see in the code: I am loosing the center effect and the all images are going left.
The only possibility I know - is to do display the images as "block" instead of "inline-block" - but that is make them one above the other and I want them to be close to each one.
You can center images by wrapping them in another div and giving this wrapper text-align:center (if you want them as inline-block elements):
img {display:inline-block;}
.wrapper {text-align:center;}
<div class="wrapper">
<img src="http://placehold.it/350x150" alt="Paris" style="width:40%">
<img src="http://placehold.it/350x150" alt="Paris" style="width:40%">
<img src="http://placehold.it/350x150" alt="Paris" style="width:40%">
</div>
You should use a DIV container around the image tags and give it a
width and
margin:0 auto instead of the images. put those on
display: inline-block.
From a JSFIDDLE
.wrapper {
border: 1px solid grey;
width: 80%;
margin: 0 auto;
text-align: center;
}
img {
display: inline-block;
}
<div class=wrapper>
<img src="https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg" alt="Paris" style="width:20%">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="Paris" style="width:20%">
<img src="http://1.bp.blogspot.com/-FlpE6jqIzQg/UmAq6fFgejI/AAAAAAAADko/ulj3pT0dIlg/s1600/best-nature-desktop-hd-wallpaper.jpg" alt="Paris" style="width:20%">
</div>
I have a fixed container and inside of that is an additional container which houses a number of DIVs based on user choices. I need these additional DIVs to line up horizontally and provide horizontal scrolling (but not vertical scrolling).
Such as this:
[x] [x] [x]
Essentially, my setup looks like this:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
</div>
</div>
The CSS breaks down as such:
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
#final {
display: inline-block;
float: left;
}
This setup works fine in Firefox however it continues to break in IE7. All of the "#final" divs are stacking vertically:
[x]
[x]
[x]
Any suggestions on how to fix this?
Several problems here. For a start:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
<div style="clear:both"></div>
</div>
</div>
You should have a DIV after your floats that remains constant, telling your browser not to float any subsequent elements (clear:both).
And you have several "final" DIVs, so they be in a CSS class, not an ID.
.final {
float: left;
}
That should do it!
Edit: That will fix your HTML/CSS errors, at least. But I've just noticed that you want the document to scroll right. The only way to do that is to set the width of the #container div to be wider than the sum of all the widths of the .final divs. Otherwise your browser will attempt to push everything "down".
Try this......
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
</div>
</div>
<style>
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
.final {
float: left;
}