It is necessary that the image went beyond the block .column, not cutting.
Image 850px
.column 225px
Image should load fully
How to make so that the picture is loaded completely?
The project is large, but the layout is such:
.content { display: inline-block; }
.column {float:right; width:225px;}
.slider {
width: auto;
max-width: inherit;
}
.slider img {
width: auto;
max-width: inherit !important;
max-height: inherit !important;
}
<div class="content">
<div class="column">
<div class="slider">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
</div>
</div>
</div>
This happened after installing the slick slider . Before this behavior was normal.
Maybe this is what you are looking for.
.content .column {overflow:visible;}
Related
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
I am a rookie for front-end development. Recently, I wrote codes like:
<div style="background-color:red">
<img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'>
</div>
The height of image(logo.jpg) is 80px, but the height of div is 82px. Why?
You can show image like a block to fix that,
<div>
<img style="display:block" src='logo.jpg'>
</div>
<div style="height:your height; width:your witdh;">
<img src='logo.jpg'>
</div>
To change the height or width you can do what i did above with inline style. or give the div a class or give the div an id and style it in an external stylesheet.
You need to write proper css to achieve this.
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/500/500">
</div>
</div>
.box1 {
width:auto;
height: auto;
max-width: 600px;
max-height: 300px;
background-color:chocolate;
padding:5px;
display: inline-block;
}
.box1 img {
vertical-align: top;
max-width: inherit;
max-height: inherit;
}
.wrap {
border: 1px dotted gray;
margin: 1.00em 0;
text-align: center;
}
JsFiddle : https://jsfiddle.net/nikdtu/75nu1a4m/
This simple bit of code works great in WebKit browsers but fails in IE and Firefox. I need to use the img tag for other functionality so background-image is not an option.
Snippet
img {
max-width: 100%;
height: auto;
}
.vgp-dtable {
width: 100%;
max-width: 860px;
margin: 0 auto 1em;
display: table;
}
.vgp-dtable .row {
display: table-row;
}
.vgp-dtable .row .art,
.vgp-dtable .row .txt {
display: table-cell;
vertical-align: top;
}
.vgp-dtable .row .art {
width: 30%;
text-align: right;
}
.vgp-dtable .row .art img {
width: auto;
max-height: 280px;
}
.vgp-dtable .row .txt {
width: 70%;
text-align: left;
padding-left: 8px;
}
<div class="vgp-dtable">
<div class="row">
<div class="art">
<img src="http://vgpavilion.com/mags/1982/12/vg/ads/003-004-005_tn.jpg">
</div>
<div class="txt">
<p>Here's some sample text.</p>
</div>
</div>
<a id="riddle-of-the-sphinx"></a>
<div class="row">
<div class="art">
<img src="http://vgpavilion.com/mags/1982/12/vg/thumbs/007.jpg">
</div>
<div class="txt">
<p>Here's some sample text.</p>
</div>
</div>
</div>
In WebKit the images properly resize to fit the 30% wide container block with a maximum height of 280px. In Firefox and IE, however, only the max-height is respected and the images force their container to become wider than 30%.
A simple example here. The simple example has a working version using a float method above the broken display:table implementation.
You can see the full page here
I have tried a number of combinations of containers and the images will never respect the width unless specified in absolute terms when in Firefox or IE. In a previous instance I went with the background-image solution that works in all tested browsers but really didn't want to. I found a solution by using a float rather than display: table-cell but it's confounding me that it is broken using a nearly identical table method in IE and Firefox so perhaps someone out there can spot something I'm missing or that I shouldn't have added.
simply add table-layout:fixed here:
.vgp-dtable {
width: 100%;
max-width: 860px;
margin: 0 auto 1em;
display: table;
table-layout: fixed /*added*/
}
This is my first try at responsive design and I can't quite get it right. As seen in the first screenshot the tower image overlaps a div and I'm not sure what I've done wrong. Image here: http://postimg.org/image/l9ax77rhz/
The width of the container is 1170px and I wanted to trigger the scaling of the images and text once the screen size dropped below that point. Image here: http://postimg.org/image/n420djzlj/ Then dropping below 760 the sections begin to overlap. I basically want to fix the overlap and have the images display first on small screens with the title and text below.
Can anyone explain to me how to do that or what I've done wrong? Html and css below
<style>
.lenovo-container {
width: 1170px;
height: 381px;
min-width: 858px;
}
.lenovo-container img {
float: left;
}
#media (max-width:1170px) {
img {
max-width: 100%;
height: auto;
}
.lenovo-container {
max-width: 100%
#media (max-width: 858) {
.lenovo-container p {
display: block;
}
}
</style>
<div class="lenovo-container">
<img class=" wp-image-1498 size-full alignnone" src="wp-content/uploads/2015/06/Rack-server-e1434645252235.jpg" alt="Rack server" width="500" height="381" />
<h2>Rack Servers</h2>
<p>Lenovo ThinkServers and System x Rack Servers are Ideal for small to medium-sized business and feature power-efficient designs, segmented workloads, and fit-for-purpose applications.</p>
<div class="product-button" style="vertical-align: bottom;">
<div class="button-inner-product">Learn more
</div>
</div>
</div>
<br>
<div class="aligncenter" style="width: 1170px; display: block; vertical-align: bottom">
<hr />
</div>
<div class="lenovo-container">
<img class="alignnone size-full wp-image-1565" src="wp-content/uploads/2015/06/Lenovo-server-e1434648963684.jpg" alt="Lenovo server" width="500" height="520" />
<h2>Tower Servers</h2>
<p>Lenovo tower servers provide the performance, reliability, and easy-to-use tools to manage your file/print and point-of-sale workloads.</p>
</div>
The culprit is the float:left. Try this instead:
.lenovo-container {
width: 1170px;
height: 381px; /* If your image is getting cut off, it's too large.
Try auto instead or remove this property altogether. */
min-width: 858px;
overflow: hidden;
}
.lenovo-container img {
float: left;
}
Floats will break the element out of document flow, and float them to the left of ALL elements. This fix forces the container to respect the bounds of the float.
A somewhat cleaner fix is:
.lenovo-container:after {
display: table;
content: '';
clear: both;
}
If you want the image to resize to the container, then try this:
#media (max-width:1170px) {
.lenovo-container img {
max-height: 100%;
}
.lenovo-container {
max-width: 100%
}
}
I have a header with a div which have display:table; max-width: 800px. It should act as a frame to restrict the contents width. Inside the frame are images which auto-scale and are nested inside div's with display:table-cell.
Everything is working on Chrome and Mobile Safari, but Firefox and IE are not restricting the frame width.
jsFiddle
Can anybody help me, please ;(
Set the table to have table-layout: fixed and a width of 100%.
.frame {
display: table;
max-width: 800px;
width: 100%;
height: 300px;
margin: 0 auto;
padding: 10px;
background: #ccc;
table-layout: fixed
}
.item {
display: table-cell;
vertical-align: middle;
padding: 0 5px;
}
img {
max-width: 100%;
height: auto;
}
<div class="frame">
<div class="item">
<img src="http://lorempixel.com/250/250" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/200" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/100" />
</div>
</div>
Check this Fiddle
Replace max-width to width from image css, the reason behind this is max-width does not apply to inline elements, so you will get inconsistent behavior across browsers.
img {
width: 100%;
height: auto;
}