asked    Jack     2018-10-22       javascript       49 view        3 Answers

[SOLVED] CSS/ cut an img's width when reducing the screen/window width

I wanted to have an Image on 100% width, with a max-height. When scaling the window and you're reaching the max-height, the width should still be at a 100% but "cropping" the image bigger (provided image size is fitting). This means you can see more of the image sides (left and right) when its on a big scale window, and you can see less on a small sized window. I'll post my css try down, but i don'thave a clue how to do that at this point. Hope you're getting my issue, i'll attach a visualisation.

My Code, don't get confused, I wanted to do a slider but lets focus on only one picture now, so sliders out of the game for now:

.slider-inner img {
  display:none;
  max-width: 100%;
  height: auto;
}

#main-slider {
  width: 80%;
  min-width: 500px;
  height: 450px;
  min-height: 400px;
  overflow: hidden;
  margin: 0 auto;
}

.slider-inner{
  width: 100%;
  height: 450px;
  margin: 0 auto;
  position:relative;
  overflow: hidden;
  float:left;
  padding: 0px;

}

What i want (visualisation):

visualisation of question

  3 Answers  

        answered    Mona     2018-10-22      

If I understood you correctly you want your image to maintain its height and crop the width when window size is smaller.

Check this example:

div{
  height: 300px;
  position: relative;
  overflow: hidden;
}

div img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div>
<img src="">
</div>


        answered    Ian     2018-10-22      

You do this with background image:

.box {
  height:200px;
  background:url(https://picsum.photos/1300/300?image=1069) center top/auto 100% no-repeat;
}
<div class="box">

</div>


        answered    Rachel     2018-10-22      

Also you had "max-width:100%" and "height: auto" before. 100% is a relative unit, saying to take up 100% of the parent container's width, and auto was telling it to scale with the width while keeping aspect ratio.





Your Answer





 2018-10-22         Samantha

React : new date() shows date of client machine rather than server

This question already has an answer here: What time zone does the Javascript new Date() use? 4 answers That is how javascript date works. Please refer to MDN docs for Date for more details. Also checkout the the parameters you can send to customize it. If no arguments are provided, the constructor creates a JavaScript Date object for the current date and time according to system settings for timezone offset Where Date is called as a constructor with more than one argument, the speci...
 javascript                     1 answers                     24 view
 2018-10-22         Eunice

Argument of type 'any[]' is not assignable to parameter of type 'A'. Property 'a' is missing in type 'any[]'

I'm a very beginner in TypeScript and now I'm trying to understand how interfaces works in a Class Method of React Component. I created a simple case for it, but it does not work. I always gets an error like in this post title.I'll be pleased for any help.import React, { Component } from 'react'interface A { a: any[]}class Test extends Component { _getName = (a: A) => { return a } render() { const a = [] return ( <div>{this._getName(a)}</div> ) }}export default Test this._getName(a) expects a to be of type A. A is defined as an object...
 javascript                     3 answers                     25 view
 2018-10-22         Corey

Fetch data Firebase in ngfor angular 6 not with angularFire

I am using angular6 and Firebase (npm install Firebase).I would like to display the list of my users in a template with ngFor, here is my demarche :ts : constructor( ) {var users = new Promise((resolve, reject)=>{ firebase.auth().onAuthStateChanged((user) => { if (user) { firebase.database().ref('users').on('value',(data) => resolve(data.val()) ); } });})HTML <tbody> <tr *ngFor="let user of users; let i = index"> <td> {{user.nom}}</td> <td>{{user.prenom}}</td> <t...
 typescript                     1 answers                     21 view