CatchmyFrame and Bootstrap - Conflito

Fala Pessoal,

Encontrei um slider para antes e depois bem interessante que funciona bem.

Catch my Frame link

O problema que encontrei foi ao juntar com o Bootstrap (vou explicar melhor o bootstrap nos próximos posts). Acontece que ao testar a imagem de cima fica menor e por cima da outra e o slider acompanha apenas a de cima. Dei uma pesquisada, após alguns testes, achei que fosse conflito de bibliotecas jquery, porém não foi, quando removi o arquivo bootstrap.css funcionou 100%. Quando coloquei novamente o arquivo o bug voltou. Resolvi então procurar id e classes em comum, porém não tinha nenhuma com o mesmo nome no arquivo jquery.beforeafter-1.4.min.js. Sobrou então a tag IMG do bootstrap, e foi isso. Segue abaixo o que fiz para funcionar:

(no arquivo bootstrap.css linha 101 aprox comente as 3 linhas abaixo).

img {
  /*width: auto\9;
  height: auto;
  max-width: 100%;*/
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}


Acabei de fazer isso, por enquanto não prejudicou em nada as imagens que estou utilizando, caso encontre algum erro em outros usos de imagens com bootstrap comenta abaixo para eu deixar atualizado aqui, ok?

OPA! Realmente existe um problema, ao comentar ali em cima as imagens passam a não se ajustar responsivamente nos SPANs do Row-fluid. Ainda não achei uma solução que combine ambas, se encontrar atualizo aqui. A sugestão é que pode mandar um Gambiware e cortar essa tag do css bootstrap e quando for utilizar em outras páginas você cola em um arquivo css separado e utiliza ela. O problema é quando quiser utilizar ambas na mesma página como estou tentando fazer....Bom vamos lá, tem que ter solução, rs. Se encontrar algo, posta que conversamos. Obrigado.

Uma solução interessante que encontrei é, manter comentado no bootstrap.css e quanto for utilizar criar uma classe para essa div span, ex:

.images img{
  width: auto\9;
  height: auto;
  max-width: 100%;

}

Parece funcionar bem.

Valeu!
Espero que ajude!