how to make dots inherit the width of the image? (slick) - html

Question

There is a block 225px. Inside you insert a picture large size (850px). And she goes outside.
It looks like this:
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
}
.single-slide img {
width: auto;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<div>to place the center of the image</div>
</div>
</div>
</div>
Using slick slider. I want to add dots to control the slider.
When I add the dots they are placed in the middle of the block. It's okay, I understand. But I want to place them in the center of the picture. How to do it?
UPD: The image goes beyond the block, that's right! And I need to do to the dots were at the center of the image, not the block

Answer 1

I see that your dots are in the center of the window.
To do this, your dots list must be inside a container with the image's width.
I think you should enlarge your slider or limit image's width with a max-width: 100%;

Answer 2

if you want to need image in box then change
.single-slide img { width: auto;}
to
.single-slide img { max-width: 100%;}

Answer 3

Updated: The inherit keyword specifies that a property should inherit its value from its parent element [ Source ]. and image can't be a parent element. see this example.
Here is a solution on based on inherit and position on your latest update.
See the html section I have added a class "img-holder" on div which hold the img and add a class "div_center" on div which contain text's.
img inherit width from its parent div class "img-holder". "img-holder" and "div_center" inherit width from parent div class slider.
N.B: if you set the img width auto text will always center of the div class slider.
.content {
display: inline-block;
}
.column {
float: right;
width: 225px;
}
.slider {
border: 1px solid #000;
width: 220px;
padding: 5px;
position:relative;
}
.img-holder {
width: inherit;
}
.img-holder img {
width: inherit;/*width auto default value. The browser calculates the width*/
}
.div_center {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div class="img-holder">
<img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' />
</div><!--./ img-holder -->
<div class="div_center">
to place the center of the image
</div><!--end of txt_center -->
</div><!--./ slider single-slide-->
</div><!--./ column -->
</div><!--./ content -->
Previous: Position absolute for slick-dots class but you dont set any relative position for that. so you need to add position relative to your slide div.
And make the image responsive. I have added responsive property for your image on css section and added border on li for clear view.
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
position: relative;
}
.single-slide img {
max-width:100%;
display:block;
height:auto;
margin:0 auto;
}
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
top:50%;
left:0;
right:0;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
border:2px solid red;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
right: 0;
bottom: 0;
left: 0;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 12px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<ul class="slick-dots">
<li class="active"><button></button></li>
<li><button></button></li>
<li><button></button></li>
</ul>
</div>
</div>
</div>